vue全家桶進階之路8:Axios的安裝與HTTP請求實戰

来源:https://www.cnblogs.com/beichengshiqiao/archive/2023/03/28/17263846.html
-Advertisement-
Play Games

Axios是一個基於Promise的HTTP客戶端,用於在瀏覽器和Node.js中發送HTTP請求。它可以使用在Vue中發送請求以及與後端API進行交互。 在Vue中使用Axios可以通過以下步驟: 安裝Axios 可以通過npm或yarn來安裝Axios:npm install axios yar ...


Axios是一個基於Promise的HTTP客戶端,用於在瀏覽器和Node.js中發送HTTP請求。它可以使用在Vue中發送請求以及與後端API進行交互。

在Vue中使用Axios可以通過以下步驟:

  1. 安裝Axios

    可以通過npm或yarn來安裝Axios:npm install axios yarn add axios    

    

npm install axios

yarn add axios

 

    

  1. 引入Axios

    在需要使用Axios的文件中,可以通過以下方式引入:    

import axios from 'axios'

 

 
  1. 使用Axios

    發送GET請求:

    

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

 

    發送POST請求:

    

axios.post('https://jsonplaceholder.typicode.com/users', {
    name: 'John Doe',
    email: '[email protected]'
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

 

以上是使用Axios的基本方法,可以通過Axios的文檔來瞭解更多的使用方法和配置選項。

 

疑問解答,理解更透徹:

1、.then(response => { console.log(response.data) })是什麼意思?

.then(response => {console.log(response.data)}) 表示一個 Promise 對象的成功回調函數。當 Promise 對象的狀態變為 resolved(已完成)時,會執行 .then() 中傳入的回調函數,並將 Promise 對象成功後返回的值作為回調函數的參數 response,在這裡 response 中包含了從伺服器返回的響應數據。

在這個例子中,我們使用 Axios 發送了一個 GET 請求,當請求成功時,響應數據會包含在 response 對象中,我們通過 console.log(response.data) 將響應數據列印到控制臺中。

需要註意的是,.then() 可以鏈式調用多個,每個 .then() 都會接收前一個 .then() 返回的結果作為參數。而如果 Promise 對象的狀態變為 rejected(已失敗),則會執行 .catch() 中傳入的回調函數。

 

2、response => { console.log(response.data) }什麼意思?

response => {console.log(response.data)} 是一個箭頭函數,也可以寫成 function(response) {console.log(response.data)} 的形式。

這個箭頭函數的作用是處理 Promise 對象成功後的響應數據。其中 response 是從伺服器返回的響應數據,通過 response.data 可以獲取響應數據的內容。

在這個例子中,我們使用 Axios 發送了一個 GET 請求,當請求成功時,Axios 會將響應數據封裝成一個 Promise 對象,並將這個 Promise 對象的成功回調函數設置為 response => {console.log(response.data)}。也就是說,當請求成功時,這個箭頭函數就會被調用,並將從伺服器返回的響應數據 response 中的 data 屬性列印到控制臺中。

 

3、export const getDevelopers = () => {什麼意思?

export const getDevelopers = () => { ... } 是一個導出函數的語法,意味著該函數可以被其他文件導入並調用。

在這個例子中,getDevelopers 函數是一個箭頭函數,沒有參數。它的作用是向伺服器發送一個請求,獲取開發者的信息。具體的實現可能包括以下步驟:

  • 導入 Axios:  
import axios from 'axios'
  • 發送請求:
export const getDevelopers = () => {
  return axios.get('/api/developers')
    .then(response => {
      return response.data
    })
    .catch(error => {
      console.log(error)
    })
}

在這個例子中,我們使用了 Axios 發送了一個 GET 請求,請求的地址是 /api/developers。當請求成功時,.then() 中的回調函數將會被執行,返回從伺服器返回的響應數據 response.data。如果請求失敗,則會執行 .catch() 中的回調函數,列印錯誤信息到控制臺中。

最後,export 關鍵字將這個函數導出,使其可以被其他文件導入並調用。其他文件可以通過 import { getDevelopers } from './api' 的方式導入 getDevelopers 函數,並調用它來獲取開發者的信息。

 

4、= () =>什麼意思?

= () => 是一個箭頭函數的語法,表示定義一個匿名函數並賦值給一個變數或常量。

箭頭函數是 ES6 引入的新語法,它的語法比傳統的函數表達式更加簡潔。箭頭函數使用箭頭符號 => 來定義函數,語法如下:

() => { ... }

 

箭頭函數沒有 function 關鍵字,參數列表放在圓括弧中,函數體放在大括弧中,如果函數體只有一條語句,可以省略大括弧和 return 關鍵字。在這個例子中,箭頭函數沒有參數,因此圓括弧中是空的,函數體中包含了具體的實現代碼。

將箭頭函數賦值給一個變數或常量,可以使得這個函數可以被其他代碼調用,例如:

const greet = () => {
  console.log('Hello, World!')
}

greet()  // 輸出:Hello, World!

在這個例子中,我們定義了一個名為 greet 的常量,並將一個箭頭函數賦值給它。當調用 greet() 時,箭頭函數將會被執行,輸出 Hello, World! 到控制臺中。

5、greet = () =>中間的括弧是什麼意思?

greet = () => { ... } 中的圓括弧 () 是箭頭函數的參數列表,它表示這個箭頭函數沒有參數。

箭頭函數的參數列表放在圓括弧中,如果沒有參數,圓括弧就是空的。例如:

const greet = () => {
  console.log('Hello, World!')
}

const add = (x, y) => {
  return x + y
}

在上面的例子中,greet 是一個不帶參數的箭頭函數,它的函數體輸出一條字元串到控制臺中。而 add 是一個帶有兩個參數的箭頭函數,它的函數體計算這兩個參數的和並返回結果。

當調用箭頭函數時,如果有參數,就需要將這些參數傳遞給函數。例如:

greet()           // 輸出:Hello, World!
console.log(add(2, 3))  // 輸出:5

在這個例子中,我們分別調用了 greetadd 兩個箭頭函數,因為 greet 沒有參數,所以我們直接調用它即可;而 add 接受兩個參數,我們需要將這兩個參數傳遞給它,並通過 console.log() 輸出返回的結果。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 其他章節請看: webgl 系列 著色器語言 本篇開始學習著色器語言 —— GLSL全稱是 Graphics Library Shader Language (圖形庫著色器語言) GLSL 是一門獨立的語言,和其他語言一樣有自己的變數、運算符、函數、迴圈(for)、控制語句(if)、函數、數組等等。 ...
  • 本博文介紹HTML中的表單標簽,包含form表單域、input輸入表單、label標簽、select下拉表單和textarea文本域。 ...
  • ECMAScript(簡稱 ES)是一種由 Ecma 國際組織定義的腳本語言標準,它定義了 JavaScript 語言的基本規範和特性。JavaScript 是一種基於 ECMAScript 標準的編程語言,因此 ECMAScript 對於 JavaScript 開發來說非常重要。 ECMAScri ...
  • TS:是JS的超集,即對JS的擴展,主要提供了類型系統和對ES6+的支持,但TS最終會轉換為js代碼去執行。 特點: 1. 始於JavaScript, 歸於JavaScript 2. 強大的類型系統 3. 先進的JavaScript | | TypeScript | JavaScript | | | ...
  • Vue.js 是一個前端開發框架,它可以幫助我們快速構建單頁應用和複雜的交互界面。而 Webpack 則是一個前端資源打包工具,它可以將多個 JavaScript、CSS、HTML、圖片等資源打包成一個或多個文件,並提供模塊化載入、壓縮、混淆等功能,以便於前端開發和部署。 在使用 Vue.js 開發 ...
  • 作為 C 端前端研發,除了攻剋業務難點以外,也要有更深層的自我目標,那就是性能優化。這事兒說大不大,說小也不小,但難度絕對不一般,所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事!文章主要內容介紹前端性能考核指標及優化方案。 ...
  • Vue Router 是 Vue.js 的官方路由管理器,它可以幫助我們實現單頁應用(Single Page Application,SPA)的前端路由。 Vue Router 基於 Vue.js 的組件化思想,將路由視為組件,並提供了多種方式來定義路由和渲染組件。Vue Router 可以通過 U ...
  • 解釋器模式(Interpreter Pattern):是一種行為型設計模式,它可以用來解決一些特定問題,例如編譯器、計算器等等。這種模式定義了一個語言的語法,並用一個解釋器來解釋語言中的表達式。 解釋器模式可以用來處理例如數據格式化、表單驗證等業務場景。在這些場景中,我們需要定義一些語法規則,然後使 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...