什麼是 Axios

Axios 是一個流行的、基於 Promise 的 HTTP 客戶端，適用於瀏覽器和 Node.js，旨在簡化 HTTP 請求。其核心價值在於易用性和可擴展性，提供簡化的方法來處理異步 HTTP 通訊。與原生 fetch API 不同，Axios 提供自動 JSON 轉換、請求和響應攔截等功能，並內建對舊版瀏覽器的支援。它利用 JavaScript 的 Promise API 進行異步操作，使程式碼更清晰、更易讀。開發人員受益於其直觀的 API、強大的錯誤處理和廣泛的社群支援，使其成為構建 Web 應用程式和 API 的首選。

Axios 的核心功能

基於 Promise 的 API

Axios 利用 JavaScript 的 `Promise` API，與基於回呼的方法相比，可以實現更清晰、更易讀的異步程式碼。這使得使用 `.then()` 和 `.catch()` 鏈接請求和錯誤處理更容易，從而提高了程式碼的可維護性並減少了「回呼地獄」問題。這也使得與 async/await 語法更容易整合。

請求和響應攔截器

攔截器允許您在發送請求之前和處理響應之前攔截和修改請求。這對於添加身份驗證標頭、記錄請求或轉換資料等任務很有用。例如，您可以使用 `axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer YOUR_TOKEN'; return config; });` 添加全域授權標頭

自動 JSON 轉換

Axios 會自動轉換請求和響應中的 JSON 資料。發送資料時，它會自動將 JavaScript 物件序列化為 JSON。接收資料時，它會自動將 JSON 響應解析為 JavaScript 物件。這簡化了資料處理，在大多數情況下無需手動解析和字串化。

瀏覽器和 Node.js 支援

Axios 在瀏覽器和 Node.js 環境中無縫運行，在不同平台上提供一致的 API。這允許開發人員重複使用相同的程式碼進行前端和後端 HTTP 請求，從而減少開發時間和精力。它抽象了 `XMLHttpRequest` 和 `http` 模組之間的差異。

請求取消

Axios 允許您使用 `CancelToken` 取消請求。這對於不再需要請求的情況很有用，例如使用者離開頁面或發生超時。您可以建立 `CancelToken` 並將其傳遞給請求配置。然後，您可以使用令牌上的 `cancel()` 方法取消請求。

內建 XSRF 保護

Axios 提供對跨站請求偽造 (XSRF) 保護的內建支援。它在向同一來源發出請求時自動設置 `X-XSRF-TOKEN` 標頭，有助於減輕 XSRF 攻擊。此功能通過提供針對常見安全漏洞的預設保護級別，簡化了安全 Web 應用程式的實施。

如何使用 Axios

在專案中包含 Axios：透過 npm 或 yarn 安裝：npm install axios 或 yarn add axios。2. 導入 Axios：在您的 JavaScript 檔案中，導入 Axios：import axios from 'axios';。3. 建立 GET 請求：使用 axios.get('your_api_endpoint') 獲取資料。使用 .then() 和 .catch() 處理響應。4. 建立 POST 請求：使用 axios.post('your_api_endpoint', { data: yourData }) 發送資料。第二個參數是資料有效負載。5. 處理響應：透過 response.data 訪問資料，透過 response.status 訪問狀態碼，透過 response.headers 訪問標頭。6. 實作錯誤處理：使用 .catch() 處理錯誤。透過 error.response（針對伺服器錯誤）或 error.message（針對網路錯誤）訪問錯誤詳細資訊。

Axios 的使用情境

在 Web 應用程式中獲取資料

Web 開發人員使用 Axios 從其 Web 應用程式中的 API 獲取資料。例如，構建天氣應用程式的開發人員將使用 Axios 從天氣 API 獲取天氣資料，解析 JSON 響應，並在使用者介面上顯示資訊。這是許多現代 Web 應用程式的核心功能。

在 Node.js 中建立 API 呼叫

後端開發人員在 Node.js 應用程式中使用 Axios 與外部 API 交互。創建伺服器端應用程式的開發人員可能會使用 Axios 將資料發送到支付網關 API 或從第三方服務獲取資料。這使得伺服器端邏輯能夠與其他服務通信。

處理表單提交

前端開發人員使用 Axios 將表單資料提交到 API。例如，在網站上構建聯繫表單的開發人員將使用 Axios 將表單資料發送到伺服器端端點。Axios 處理表單資料的序列化和 HTTP 請求的發送。

實作身份驗證

開發人員使用 Axios 處理身份驗證流程，例如登錄使用者或刷新訪問令牌。開發人員可能會使用 Axios 將登錄憑據發送到身份驗證 API，並儲存返回的令牌以供後續請求使用。攔截器可用於自動將令牌添加到每個請求。

誰適合使用 Axios

前端開發人員

前端開發人員受益於 Axios 的易用性和瀏覽器相容性。它簡化了 HTTP 請求、處理響應以及與 API 的整合，使其更容易構建從外部來源獲取和顯示資料的動態和互動式 Web 應用程式。

後端開發人員

後端開發人員在 Node.js 環境中使用 Axios 向其他 API 或服務發出 HTTP 請求。這使他們能夠構建與外部資源交互、處理資料交換以及與各種第三方服務整合的伺服器端應用程式。

全端開發人員

全端開發人員將 Axios 用於前端和後端開發。他們可以使用相同的庫和 API 在這兩個環境中發出 HTTP 請求，從而簡化其工作流程並減少處理整個應用程式堆疊中的 API 交互的學習曲線。

API 整合者

需要與各種 API 整合的開發人員發現 Axios 非常寶貴。其請求/響應攔截器、自動 JSON 轉換和基於 Promise 的 API 等功能使其更容易處理不同的 API 格式、身份驗證方法和錯誤處理，從而簡化了整合過程。

Axios