Axios 關(guān)鍵要點(diǎn)

• Axios 是一個(gè)流行的基於 Promise 的 HTTP 客戶端，擁有易於使用的 API，可在瀏覽器和 Node.js 環(huán)境中使用。它為 JavaScript 開(kāi)發(fā)者提供了一個(gè)多功能工具。
• Axios 與內(nèi)置的 Fetch API 在幾個(gè)方面有所不同，包括其對(duì) HTTP 錯(cuò)誤代碼的處理、自動(dòng)包含 Cookie 在請(qǐng)求中以及能夠提供上傳/下載進(jìn)度更新。
• Axios 允許開(kāi)發(fā)者轉(zhuǎn)換輸出或輸入數(shù)據(jù)並添加攔截器，攔截器是在發(fā)出請(qǐng)求或收到響應(yīng)時(shí)觸發(fā)的函數(shù)。這些功能為處理數(shù)據(jù)和管理請(qǐng)求和響應(yīng)提供了靈活性。
• 存在一個(gè)強(qiáng)大的第三方庫(kù)生態(tài)系統(tǒng)來(lái)擴(kuò)展 Axios 的功能。這些附加組件涵蓋了從攔截器和測(cè)試適配器到日誌記錄器，增強(qiáng)了 Axios 在不同用例中的能力。

Axios 是一個(gè)廣受歡迎的基於 Promise 的 HTTP 客戶端，它具有易於使用的 API，並且可以在瀏覽器和 Node.js 環(huán)境中使用。發(fā)出 HTTP 請(qǐng)求以獲取或保存數(shù)據(jù)是客戶端 JavaScript 應(yīng)用程序最常見(jiàn)的任務(wù)之一。長(zhǎng)期以來(lái)，第三方庫(kù)（尤其是 jQuery）一直是與冗長(zhǎng)的瀏覽器 API 交互並消除跨瀏覽器差異的流行方法。隨著人們逐漸放棄 jQuery 而轉(zhuǎn)向改進(jìn)的原生 DOM API 或 React 和 Vue.js 等前端 UI 庫(kù)，僅僅為了其 $.ajax 功能而包含它就變得沒(méi)有意義了。讓我們看看如何在代碼中開(kāi)始使用 Axios，並了解一些使其在 JavaScript 開(kāi)發(fā)人員中廣受歡迎的功能。

Axios 與 Fetch 的比較

您可能已經(jīng)知道，現(xiàn)代瀏覽器內(nèi)置了較新的 Fetch API，那麼為什麼不直接使用它呢？?jī)烧咧g存在一些差異，許多人認(rèn)為這使得 Axios 更具優(yōu)勢(shì)。其中一個(gè)區(qū)別在於這兩個(gè)庫(kù)如何處理 HTTP 錯(cuò)誤代碼。使用 Fetch 時(shí)，如果服務(wù)器返回 4xx 或 5xx 系列錯(cuò)誤，則您的 catch() 回調(diào)不會(huì)被觸發(fā)，開(kāi)發(fā)人員需要檢查響應(yīng)狀態(tài)代碼以確定請(qǐng)求是否成功。另一方面，如果返回這些狀態(tài)代碼之一，Axios 將拒絕請(qǐng)求 Promise。另一個(gè)經(jīng)常讓剛接觸 API 的開(kāi)發(fā)者感到困惑的小區(qū)別是，F(xiàn)etch 在發(fā)出請(qǐng)求時(shí)不會(huì)自動(dòng)將 Cookie 發(fā)送回服務(wù)器。必須明確傳遞一個(gè)選項(xiàng)才能包含它們。 Axios 在這里為您提供支持。對(duì)於某些人來(lái)說(shuō)，最終可能成為障礙的一個(gè)區(qū)別是上傳/下載的進(jìn)度更新。由於 Axios 建立在較舊的 XHR API 之上，因此您可以註冊(cè) onUploadProgress 和 onDownloadProgress 回調(diào)函數(shù)，以便在應(yīng)用程序的 UI 中顯示完成百分比。目前，F(xiàn)etch 不支持此功能。最後，Axios 可以在瀏覽器和 Node.js 中使用。這有助於在瀏覽器和後端之間共享 JavaScript 代碼，或執(zhí)行前端應(yīng)用程序的服務(wù)器端渲染。 注意：Node 有 Fetch API 的版本可用，但在我看來(lái)，Axios 提供的其他功能使其更具優(yōu)勢(shì)。

安裝

正如您可能預(yù)期的那樣，安裝 Axios 最常見(jiàn)的方法是通過(guò) npm 包管理器：

npm i axios

並在需要的地方將其包含在您的代碼中：

// ES2015 風(fēng)格導(dǎo)入
import axios from 'axios';

// Node.js 風(fēng)格 require
const axios = require('axios');

如果您沒(méi)有使用某種模塊捆綁器（例如 webpack），那麼您可以始終以傳統(tǒng)方式從 CDN 中提取庫(kù)：

<??>

瀏覽器支持

Axios 在所有現(xiàn)代 Web 瀏覽器和 Internet Explorer 8 中均可運(yùn)行。

發(fā)出請(qǐng)求

與 jQuery 的 $.ajax 函數(shù)類似，您可以通過(guò)將選項(xiàng)對(duì)像傳遞給 Axios 來(lái)發(fā)出任何類型的 HTTP 請(qǐng)求：

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

在這裡，我們告訴 Axios 我們想要使用哪種 HTTP 方法（例如 GET/POST/DELETE 等）以及應(yīng)該向哪個(gè) URL 發(fā)出請(qǐng)求。我們還提供了一些數(shù)據(jù)，這些數(shù)據(jù)將以簡(jiǎn)單的鍵/值對(duì) JavaScript 對(duì)象的形式與請(qǐng)求一起發(fā)送。默認(rèn)情況下，Axios 將將其序列化為 JSON 並將其作為請(qǐng)求正文發(fā)送。

請(qǐng)求選項(xiàng)

發(fā)出請(qǐng)求時(shí)，您可以傳遞許多其他選項(xiàng)，但以下是一些最常見(jiàn)的選項(xiàng)：

• baseUrl：如果您指定了一個(gè)基本 URL，它將附加到您使用的任何相對(duì) URL。
• headers：要作為標(biāo)頭髮送的鍵/值對(duì)對(duì)象。
• params：將被序列化並作為查詢字符串附加到 URL 的鍵/值對(duì)對(duì)象。
• responseType：如果您期望的響應(yīng)格式不是 JSON，您可以將此屬性設(shè)置為 arraybuffer、blob、document、text 或 stream。
• auth：傳遞包含用戶名和密碼字段的對(duì)象將使用這些憑據(jù)對(duì)請(qǐng)求進(jìn)行 HTTP 基本身份驗(yàn)證。

方便方法

與 jQuery 一樣，還有一些快捷方法可以執(zhí)行不同類型的請(qǐng)求。 get、delete、head 和 options 方法都接受兩個(gè)參數(shù)：一個(gè) URL 和一個(gè)可選的配置對(duì)象。

npm i axios

post、put 和 patch 方法將數(shù)據(jù)對(duì)像作為它們的第二個(gè)參數(shù)，並將可選的配置對(duì)像作為第三個(gè)參數(shù)：

// ES2015 風(fēng)格導(dǎo)入
import axios from 'axios';

// Node.js 風(fēng)格 require
const axios = require('axios');

接收響應(yīng)

發(fā)出請(qǐng)求後，Axios 返回一個(gè) Promise，該 Promise 將解析為響應(yīng)對(duì)像或錯(cuò)誤對(duì)象。

<??>

響應(yīng)對(duì)象

如果請(qǐng)求成功，您的 then() 回調(diào)將收到一個(gè)響應(yīng)對(duì)象，其中包含以下屬性：

• data：服務(wù)器返回的有效負(fù)載。默認(rèn)情況下，Axios 期望 JSON 並將其解析回 JavaScript 對(duì)象。
• status：服務(wù)器返回的 HTTP 代碼。
• statusText：服務(wù)器返回的 HTTP 狀態(tài)消息。
• headers：服務(wù)器發(fā)送回的所有標(biāo)頭。
• config：原始請(qǐng)求配置。
• request：（在瀏覽器中運(yùn)行時(shí)）實(shí)際的 XMLHttpRequest 對(duì)象。

錯(cuò)誤對(duì)象

如果請(qǐng)求出現(xiàn)問(wèn)題，Promise 將被拒絕，並顯示一個(gè)錯(cuò)誤對(duì)象，其中至少包含以下屬性：

• message：錯(cuò)誤消息文本。
• response：上一節(jié)中描述的響應(yīng)對(duì)象（如果已收到）。
• request：（在瀏覽器中運(yùn)行時(shí)）實(shí)際的 XMLHttpRequest 對(duì)象。
• config：原始請(qǐng)求配置。

轉(zhuǎn)換和攔截器

Axios 提供了一些受 Angular 的 $http 庫(kù)啟發(fā)的簡(jiǎn)潔功能。儘管它們看起來(lái)相似，但它們的用例略有不同。

轉(zhuǎn)換

Axios 允許您提供函數(shù)來(lái)轉(zhuǎn)換輸出或輸入數(shù)據(jù)，這些函數(shù)採(cǎi)用您可以發(fā)出請(qǐng)求時(shí)設(shè)置的兩個(gè)配置選項(xiàng)的形式：transformRequest 和 transformResponse。這兩個(gè)屬性都是數(shù)組，允許您鏈接多個(gè)將傳遞數(shù)據(jù)的函數(shù)。任何傳遞給 transformRequest 的函數(shù)都將應(yīng)用於 PUT、POST 和 PATCH 請(qǐng)求。它們接收請(qǐng)求數(shù)據(jù)和標(biāo)頭對(duì)像作為參數(shù)，並且必須返回修改後的數(shù)據(jù)對(duì)象。

npm i axios

可以以相同的方式向 transformResponse 添加函數(shù)，但僅在使用響應(yīng)數(shù)據(jù)且在將響應(yīng)傳遞給任何鏈接的 then() 回調(diào)之前調(diào)用它們。那麼我們可以將轉(zhuǎn)換用於什麼？一個(gè)潛在的用例是處理期望以特定格式（例如 XML 或什至 CSV）接收數(shù)據(jù)的 API。您可以設(shè)置一對(duì)轉(zhuǎn)換，以便將輸出和輸入數(shù)據(jù)轉(zhuǎn)換為 API 需要的格式，並從該格式轉(zhuǎn)換回來(lái)。值得注意的是，Axios 的默認(rèn) transformRequest 和 transformResponse 函數(shù)將數(shù)據(jù)轉(zhuǎn)換為 JSON 並從 JSON 轉(zhuǎn)換，並且指定您自己的轉(zhuǎn)換將覆蓋這些轉(zhuǎn)換。

攔截器

雖然轉(zhuǎn)換允許您修改輸出和輸入數(shù)據(jù)，但 Axios 還允許您添加稱為攔截器的函數(shù)。與轉(zhuǎn)換一樣，這些函數(shù)也可以附加到發(fā)出請(qǐng)求時(shí)或收到響應(yīng)時(shí)觸發(fā)。

// ES2015 風(fēng)格導(dǎo)入
import axios from 'axios';

// Node.js 風(fēng)格 require
const axios = require('axios');

正如您從上面的示例中可能注意到的那樣，攔截器與轉(zhuǎn)換有一些重要的區(qū)別。攔截器不是只接收數(shù)據(jù)或標(biāo)頭，而是接收完整的請(qǐng)求配置或響應(yīng)對(duì)象。創(chuàng)建攔截器時(shí)，您還可以選擇提供一個(gè)錯(cuò)誤處理程序函數(shù)，允許您捕獲任何錯(cuò)誤並適當(dāng)?shù)靥幚硭鼈?。?qǐng)求攔截器可用於執(zhí)行諸如從本地存儲(chǔ)檢索令牌並與所有請(qǐng)求一起發(fā)送之類的操作，而響應(yīng)攔截器可用於捕獲 401 響應(yīng)並將重定向到登錄頁(yè)面以進(jìn)行授權(quán)。

第三方附加組件

作為一個(gè)流行的庫(kù)，Axios 受益於擴(kuò)展其功能的第三方庫(kù)生態(tài)系統(tǒng)。從攔截器到測(cè)試適配器再到日誌記錄器，有很多可用的工具。以下是一些我認(rèn)為您可能會(huì)發(fā)現(xiàn)有用的工具：

• mock-adapter：允許您輕鬆模擬請(qǐng)求以促進(jìn)測(cè)試代碼。
• cache-plugin：用於有選擇地緩存 GET 請(qǐng)求的包裝器。
• redux-axios-middleware：如果您是 Redux 用戶，此中間件提供了一種簡(jiǎn)潔的方法來(lái)使用普通的舊操作調(diào)度 Ajax 請(qǐng)求。

Axios GitHub 存儲(chǔ)庫(kù)中提供了更多附加組件和擴(kuò)展的列表?？偠灾珹xios 有很多值得推薦的地方。它具有簡(jiǎn)單的 API，以及對(duì)以前使用過(guò) jQuery 的任何人來(lái)說(shuō)都很熟悉的實(shí)用快捷方法。它的流行以及各種第三方附加組件的可用性使其成為包含在您的應(yīng)用程序中的可靠選擇，無(wú)論是在前端、後端還是兩者兼而有之。

Axios 常見(jiàn)問(wèn)題解答 (FAQ)

Axios 和 Fetch API 之間的區(qū)別是什麼？

Axios 和 Fetch API 都是流行的 HTTP 請(qǐng)求工具。但是，兩者之間存在一些關(guān)鍵區(qū)別。 Axios 是一個(gè)基於 Promise 的 HTTP 客戶端，它可以在瀏覽器和 node.js 環(huán)境中工作。它提供了一個(gè)用於處理 XMLHttpRequests 和 node 的 HTTP 接口的單一 API。另一方面，F(xiàn)etch API 提供了 Request 和 Response 對(duì)象的通用定義，它也是基於 Promise 的。但與 Axios 不同，F(xiàn)etch API 不是基於 XMLHttpRequest 的，它是 JavaScript ES6 的內(nèi)置模塊。

如何使用 Axios 處理錯(cuò)誤？

Axios 提供了一種強(qiáng)大的錯(cuò)誤處理方法。當(dāng) Axios 請(qǐng)求期間發(fā)生錯(cuò)誤時(shí)，它將被拒絕，並顯示一個(gè)錯(cuò)誤對(duì)象。錯(cuò)誤對(duì)象包含有關(guān)錯(cuò)誤原因的信息，例如錯(cuò)誤消息、HTTP 狀態(tài)代碼以及請(qǐng)求和響應(yīng)對(duì)象。您可以使用 try/catch 塊或 Promise 的 catch 方法捕獲此錯(cuò)誤。

我可以在 React 中使用 Axios 嗎？

是的，Axios 可用於 React。事實(shí)上，它是在 React 應(yīng)用程序中發(fā)出 HTTP 請(qǐng)求的流行選擇。您可以在 React 中使用 Axios 從 API 獲取數(shù)據(jù)並在您的組件中顯示它。 React 中的 Axios 請(qǐng)求可以在 componentDidMount 或 useEffect 鉤子中進(jìn)行。

如何在 Axios 中取消請(qǐng)求？

Axios 提供了一種取消請(qǐng)求的機(jī)制。這可以使用 CancelToken.source 工廠方法來(lái)完成。當(dāng)您想要取消請(qǐng)求時(shí)，只需調(diào)用源對(duì)像上的 cancel 方法即可。

如何使用 Axios 發(fā)出 POST 請(qǐng)求？

使用 Axios 發(fā)出 POST 請(qǐng)求很簡(jiǎn)單。您可以使用 Axios 實(shí)例的 post 方法並將 URL 和數(shù)據(jù)作為參數(shù)傳遞。數(shù)據(jù)應(yīng)該是表示請(qǐng)求有效負(fù)載的 JavaScript 對(duì)象。

我可以在 Vue.js 中使用 Axios 嗎？

是的，Axios 可用於 Vue.js。它是在 Vue.js 應(yīng)用程序中發(fā)出 HTTP 請(qǐng)求的流行選擇。您可以在 Vue.js 中使用 Axios 從 API 獲取數(shù)據(jù)並在您的組件中顯示它。

如何在 Axios 中設(shè)置默認(rèn)標(biāo)頭？

Axios 允許您設(shè)置默認(rèn)標(biāo)頭，這些標(biāo)頭將與每個(gè)請(qǐng)求一起發(fā)送。這可以使用 Axios 實(shí)例的 defaults 屬性來(lái)完成。您可以將 defaults 對(duì)象的 headers 屬性設(shè)置為表示標(biāo)頭的 JavaScript 對(duì)象。

我可以在 Node.js 環(huán)境中使用 Axios 嗎？

是的，Axios 可用於 Node.js 環(huán)境。它提供了一個(gè)用於處理 XMLHttpRequests 和 node 的 HTTP 接口的單一 API。這使其成為在 JavaScript 中發(fā)出 HTTP 請(qǐng)求的多功能工具。

如何處理 Axios 中的響應(yīng)？

使用 Axios 發(fā)出請(qǐng)求時(shí)，它會(huì)返回一個(gè)解析為響應(yīng)對(duì)象的 Promise。此對(duì)象包含從服務(wù)器返回的數(shù)據(jù)、請(qǐng)求的狀態(tài)、標(biāo)頭以及其他信息。您可以使用 Promise 的 then 方法處理此響應(yīng)。

我可以使用 Axios 同時(shí)發(fā)出多個(gè)請(qǐng)求嗎？

是的，Axios 允許您同時(shí)發(fā)出多個(gè)請(qǐng)求。這可以使用 Axios 的 all 方法來(lái)完成。您將 Axios 請(qǐng)求返回的 Promise 數(shù)組傳遞給 all 方法，它返回一個(gè)新的 Promise，當(dāng)所有請(qǐng)求完成後，該 Promise 將解析。

以上是Axios初學(xué)者的指南：一個(gè)方便的基於承諾的HTTP客戶端的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！