Axios?提供了一種稱為?“攔截器（interceptors）”?的功能，使我們能夠在請求或響應被發送或處理之前對它們進行全局處理。攔截器為我們提供了一種簡潔而強大的方式來轉換請求和響應、進行錯誤處理、添加認證信息等操作。在本文中，我們將深入探討如何使用 Axios 的攔截器，并提供一個實際案例來演示其用法。

Axios 攔截器的基本概念

在 Axios 中，攔截器是一個由兩個部分組成的對象：請求攔截器（request interceptors）和響應攔截器（response interceptors）。這兩種攔截器允許我們在請求發出之前和收到響應后對其進行預處理。

請求攔截器（request interceptors）?用于在請求被發送之前修改請求配置，或者在發送請求前進行一些操作，例如添加認證信息、設置請求頭等。

響應攔截器（response interceptors）?用于在接收到響應數據之后進行處理，可以對響應數據進行轉換、錯誤處理等操作。

Axios 攔截器是鏈式結構的，這意味著您可以同時使用多個攔截器，并且它們按照添加順序依次執行。

下面是 Axios 中攔截器的基本用法：

// 添加請求攔截器
axios.interceptors.request.use(function (config) {// 在發送請求之前做些什么return config;},function (error) {// 對請求錯誤做些什么return Promise.reject(error);}
);// 添加響應攔截器
axios.interceptors.response.use(function (response) {// 對響應數據做些什么return response;},function (error) {// 對響應錯誤做些什么return Promise.reject(error);}
);

實踐案例：使用 Axios 攔截器請求處理

讓我們通過一個實際案例來演示?Axios?攔截器的用法。在這個案例中，我們將使用 Axios 發起一個 GET 請求，并在請求攔截器中添加一個基本的認證頭，并在響應攔截器中處理返回的數據。

請求路徑

為了便于測試，所以案例使用?Apifox?提供的開放 API?來測試，測試的 API 路徑為：https://echo.apifox.com/get?q1=v1

案例代碼

首先，確保您已經在項目中安裝了 Axios：

npm install axios

現在，我們來編寫實踐案例代碼：

// 導入 Axios 和你的 IDE 編輯器中的其他必要模塊
const axios = require('axios');// 添加請求攔截器
axios.interceptors.request.use(function (config) {// 在發送請求之前添加認證頭config.headers['Authorization'] = 'Bearer your_access_token';return config;},function (error) {return Promise.reject(error);}
);// 添加響應攔截器
axios.interceptors.response.use(function (response) {// 對響應數據進行處理return response.data;},function (error) {// 對響應錯誤進行處理return Promise.reject(error);}
);// 發起 GET 請求
axios.get('https://echo.apifox.com/get?q1=v1').then((data) => {// 處理返回的數據console.log('請求成功，數據為：', data);}).catch((error) => {// 處理錯誤console.error('請求失敗，錯誤為：', error);});

在這個案例中，我們在請求攔截器中添加了一個名為 "Authorization" 的認證頭，并在響應攔截器中處理了返回的數據。

提示與注意事項

1. 當添加多個攔截器時，確保它們的順序是正確的，因為它們會按照添加的順序依次執行。
2. 在攔截器中，務必返回修改后的 config 對象或響應數據，否則可能會導致請求或響應失敗。
3. 謹慎使用攔截器，不要濫用，否則可能會導致代碼難以維護和理解。

總結

Axios 的攔截器是一個強大的功能，使得我們能夠在請求和響應階段對數據進行全局處理。我們在本文中介紹了請求攔截器和響應攔截器的基本概念，并通過一個實踐案例演示了如何使用 Axios 攔截器來處理基本路由與請求。攔截器為我們提供了更靈活、高效的方式來管理 HTTP 請求和響應，幫助我們在前端開發中更好地處理數據交互。

使用 Apifox 來 Mock 數據

Apifox = Postman + Swagger + Mock + JMeter，Apifox?支持調試 http(s)、WebSocket、Socket、gRPC、Dubbo 等協議的接口，并且集成了?IDEA 插件。在后端人員寫完服務接口時，測試階段可以通過?Apifox?來校驗接口的正確性，圖形化界面極大的方便了項目的上線效率。

更為重要的是，Apifox?能夠 Mock 數據，其集成了 Mock.js 庫，允許你自定義規則，并且可以編寫腳本，強大的?Mock 功能可以讓前端開發人員不再苦苦等待后端提供接口，自己就能提前造各種各樣的數據出來，可視化操作讓你點點鼠標就能生成可觀的人性化數據。

知識擴展：

• Axios 中如何設置請求頭（headers）
• Axios 的 baseurl 怎么配置？深入剖析 Axios 的 baseURL 配置方法

參考鏈接：

• Axios 官方文檔：Interceptors |?Axios Docs