深入了解 Axios 攔截器

本文將向您介紹什么是 Axios 攔截器以及如何使用它們。通過分步指南和示例代碼，您將學習如何使用 Axios 攔截器來處理請求和響應，并添加授權和錯誤處理。

什么是 Axios 攔截器？

Axios 攔截器允許您在請求發送和響應接收過程中攔截、操作和修改它們。Axios 提供了兩種類型的攔截器：請求攔截器和響應攔截器。

請求攔截器允許您在發送請求之前修改請求的配置或添加自定義的頭部和標記。它們也可以用于添加身份驗證和授權令牌，以確保只有經過身份驗證的用戶才能訪問受保護的資源。

響應攔截器允許您在接收響應之前攔截和處理它們。它們可以用于處理響應錯誤和重定向，以及過濾或轉換響應數據。

使用 Axios 攔截器

讓我們以請求攔截器為例來學習如何使用 Axios 攔截器。在您的 JavaScript 文件中添加以下代碼：

import axios from ‘axios’;

axios.interceptors.request.use(
config => {
const token = localStorage.getItem(‘authToken’);
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
},
error => {
return Promise.reject(error);
}
);
在上述代碼中，我們使用 .interceptors 屬性將請求攔截器添加到 Axios。.request.use() 方法接收兩個函數參數：第一個函數在發送請求之前被調用，它接收一個 Axios 請求配置對象，并返回一個新的配置對象。在上述代碼中，我們從本地存儲中獲取授權令牌，并把它添加到請求頭中的 Authorization 標頭中。

第二個函數是在請求發生錯誤時調用的。在這個例子中，我們簡單地返回一個被拒絕的 Promise 對象，以便在鏈式調用中處理錯誤。

接下來，讓我們學習如何使用響應攔截器。在您的 JavaScript 文件中添加以下代碼：

axios.interceptors.response.use(
response => {
if (response.data && response.data.error_code) {
return Promise.reject(response.data);
}
return response;
},
error => {
if (error.response && error.response.status === 401) {
localStorage.removeItem(‘authToken’);
window.location.href = ‘/login’;
}
return Promise.reject(error.response.data);
}
);
在上述代碼中，我們使用 .interceptors 屬性將響應攔截器添加到 Axios。.response.use() 方法接收兩個函數參數：第一個函數在成功響應時調用，它接收響應對象，并返回新的響應對象或 Promise 對象。在上述代碼中，我們檢查響應數據是否包含錯誤代碼，如果是，我們就返回一個被拒絕的 Promise 對象。否則，我們將返回原始響應對象。

第二個函數在響應發生錯誤時調用。在這個例子中，我們檢查響應狀態碼是否為 401（未經授權），如果是，我們就從本地存儲中刪除授權令牌，并重定向到登錄頁面。否則，我們返回響應數據的 Promise 對象，以便在鏈式調用中處理錯誤。

總結

通過本文，您學習了如何使用 Axios 攔截器來處理請求和響應，并添加授權和錯誤處理。您可以使用這些攔截器來添加自定義頭部、標記、身份驗證和授權令牌，并處理響應錯誤和重定向。Axios 提供了許多其他配置選項和參數來進一步定制和控制請求和響應的行