Axios初學者的指南：一個方便的基於承諾的HTTP客戶端

Axios 關鍵要點

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

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

Axios 與 Fetch 的比較

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

安裝

正如您可能預期的那樣，安裝 Axios 最常見的方法是通過 npm 包管理器：

npm i axios

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

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

如果您沒有使用某種模塊捆綁器（例如 webpack），那麼您可以始終以傳統方式從 CDN 中提取庫：

<🎜>

瀏覽器支持

Axios 在所有現代 Web 瀏覽器和 Internet Explorer 8 中均可運行。

發出請求

與 jQuery 的 $.ajax 函數類似，您可以通過將選項對像傳遞給 Axios 來發出任何類型的 HTTP 請求：

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

在這裡，我們告訴 Axios 我們想要使用哪種 HTTP 方法（例如 GET/POST/DELETE 等）以及應該向哪個 URL 發出請求。我們還提供了一些數據，這些數據將以簡單的鍵/值對 JavaScript 對象的形式與請求一起發送。默認情況下，Axios 將將其序列化為 JSON 並將其作為請求正文發送。

請求選項

發出請求時，您可以傳遞許多其他選項，但以下是一些最常見的選項：

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

方便方法

與 jQuery 一樣，還有一些快捷方法可以執行不同類型的請求。 get、delete、head 和 options 方法都接受兩個參數：一個 URL 和一個可選的配置對象。

npm i axios

post、put 和 patch 方法將數據對像作為它們的第二個參數，並將可選的配置對像作為第三個參數：

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

接收響應

發出請求後，Axios 返回一個 Promise，該 Promise 將解析為響應對像或錯誤對象。

<🎜>

響應對象

如果請求成功，您的 then() 回調將收到一個響應對象，其中包含以下屬性：

• data：服務器返回的有效負載。默認情況下，Axios 期望 JSON 並將其解析回 JavaScript 對象。
• status：服務器返回的 HTTP 代碼。
• statusText：服務器返回的 HTTP 狀態消息。
• headers：服務器發送回的所有標頭。
• config：原始請求配置。
• request：（在瀏覽器中運行時）實際的 XMLHttpRequest 對象。

錯誤對象

如果請求出現問題，Promise 將被拒絕，並顯示一個錯誤對象，其中至少包含以下屬性：

• message：錯誤消息文本。
• response：上一節中描述的響應對象（如果已收到）。
• request：（在瀏覽器中運行時）實際的 XMLHttpRequest 對象。
• config：原始請求配置。

轉換和攔截器

Axios 提供了一些受 Angular 的 $http 庫啟發的簡潔功能。儘管它們看起來相似，但它們的用例略有不同。

轉換

Axios 允許您提供函數來轉換輸出或輸入數據，這些函數採用您可以發出請求時設置的兩個配置選項的形式：transformRequest 和 transformResponse。這兩個屬性都是數組，允許您鏈接多個將傳遞數據的函數。任何傳遞給 transformRequest 的函數都將應用於 PUT、POST 和 PATCH 請求。它們接收請求數據和標頭對像作為參數，並且必須返回修改後的數據對象。

npm i axios

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

攔截器

雖然轉換允許您修改輸出和輸入數據，但 Axios 還允許您添加稱為攔截器的函數。與轉換一樣，這些函數也可以附加到發出請求時或收到響應時觸發。

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

正如您從上面的示例中可能注意到的那樣，攔截器與轉換有一些重要的區別。攔截器不是只接收數據或標頭，而是接收完整的請求配置或響應對象。創建攔截器時，您還可以選擇提供一個錯誤處理程序函數，允許您捕獲任何錯誤並適當地處理它們。請求攔截器可用於執行諸如從本地存儲檢索令牌並與所有請求一起發送之類的操作，而響應攔截器可用於捕獲 401 響應並將重定向到登錄頁面以進行授權。

第三方附加組件

作為一個流行的庫，Axios 受益於擴展其功能的第三方庫生態系統。從攔截器到測試適配器再到日誌記錄器，有很多可用的工具。以下是一些我認為您可能會發現有用的工具：

• mock-adapter：允許您輕鬆模擬請求以促進測試代碼。
• cache-plugin：用於有選擇地緩存 GET 請求的包裝器。
• redux-axios-middleware：如果您是 Redux 用戶，此中間件提供了一種簡潔的方法來使用普通的舊操作調度 Ajax 請求。

Axios GitHub 存儲庫中提供了更多附加組件和擴展的列表。總而言之，Axios 有很多值得推薦的地方。它具有簡單的 API，以及對以前使用過 jQuery 的任何人來說都很熟悉的實用快捷方法。它的流行以及各種第三方附加組件的可用性使其成為包含在您的應用程序中的可靠選擇，無論是在前端、後端還是兩者兼而有之。

Axios 常見問題解答 (FAQ)

Axios 和 Fetch API 之間的區別是什麼？

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

如何使用 Axios 處理錯誤？

Axios 提供了一種強大的錯誤處理方法。當 Axios 請求期間發生錯誤時，它將被拒絕，並顯示一個錯誤對象。錯誤對象包含有關錯誤原因的信息，例如錯誤消息、HTTP 狀態代碼以及請求和響應對象。您可以使用 try/catch 塊或 Promise 的 catch 方法捕獲此錯誤。

我可以在 React 中使用 Axios 嗎？

是的，Axios 可用於 React。事實上，它是在 React 應用程序中發出 HTTP 請求的流行選擇。您可以在 React 中使用 Axios 從 API 獲取數據並在您的組件中顯示它。 React 中的 Axios 請求可以在 componentDidMount 或 useEffect 鉤子中進行。

如何在 Axios 中取消請求？

Axios 提供了一種取消請求的機制。這可以使用 CancelToken.source 工廠方法來完成。當您想要取消請求時，只需調用源對像上的 cancel 方法即可。

如何使用 Axios 發出 POST 請求？

使用 Axios 發出 POST 請求很簡單。您可以使用 Axios 實例的 post 方法並將 URL 和數據作為參數傳遞。數據應該是表示請求有效負載的 JavaScript 對象。

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

是的，Axios 可用於 Vue.js。它是在 Vue.js 應用程序中發出 HTTP 請求的流行選擇。您可以在 Vue.js 中使用 Axios 從 API 獲取數據並在您的組件中顯示它。

如何在 Axios 中設置默認標頭？

Axios 允許您設置默認標頭，這些標頭將與每個請求一起發送。這可以使用 Axios 實例的 defaults 屬性來完成。您可以將 defaults 對象的 headers 屬性設置為表示標頭的 JavaScript 對象。

我可以在 Node.js 環境中使用 Axios 嗎？

是的，Axios 可用於 Node.js 環境。它提供了一個用於處理 XMLHttpRequests 和 node 的 HTTP 接口的單一 API。這使其成為在 JavaScript 中發出 HTTP 請求的多功能工具。

如何處理 Axios 中的響應？

使用 Axios 發出請求時，它會返回一個解析為響應對象的 Promise。此對象包含從服務器返回的數據、請求的狀態、標頭以及其他信息。您可以使用 Promise 的 then 方法處理此響應。

我可以使用 Axios 同時發出多個請求嗎？

是的，Axios 允許您同時發出多個請求。這可以使用 Axios 的 all 方法來完成。您將 Axios 請求返回的 Promise 數組傳遞給 all 方法，它返回一個新的 Promise，當所有請求完成後，該 Promise 將解析。

以上是Axios初學者的指南：一個方便的基於承諾的HTTP客戶端的詳細內容。更多資訊請關注PHP中文網其他相關文章！