axios攔截器原理是什麼？

王铁柱6發表於2024-12-06
iOS

Axios 攔截器的工作原理基於鏈式呼叫和Promise。它允許你在請求傳送前和響應返回後對請求和響應進行攔截和處理。 可以理解為一個“中介軟體”機制。

具體來說，Axios 攔截器分為兩種：

  • 請求攔截器 (Request Interceptors): 在請求傳送之前執行。可以用於修改請求配置 (例如新增 headers、修改 data)，或根據條件取消請求。
  • 響應攔截器 (Response Interceptors): 在收到響應之後執行。可以用於處理響應資料 (例如資料轉換、錯誤處理)，或根據響應狀態碼進行重定向。

工作流程：

  1. 註冊攔截器: 使用 axios.interceptors.request.use() 註冊請求攔截器，使用 axios.interceptors.response.use() 註冊響應攔截器。這兩個方法都接受兩個引數：

    • fulfilled 回撥函式：請求/響應成功時觸發。
    • rejected 回撥函式：請求/響應失敗時觸發 (例如網路錯誤、超時)。

  2. 鏈式呼叫: 多個攔截器可以被註冊，它們會按照註冊順序依次執行，形成一個鏈條。對於請求攔截器，鏈條的末端是實際的網路請求；對於響應攔截器，鏈條的末端是將響應資料返回給呼叫者。

  3. Promise 處理: 攔截器內部使用 Promise 來處理非同步操作。fulfilled 回撥函式必須返回一個值 (可以是修改後的 config 或 response)，或者是一個 Promise。這個返回值會被傳遞給鏈條中的下一個攔截器。如果 fulfilled 回撥函式丟擲錯誤，或者返回一個 rejected 的 Promise，則會觸發 rejected 回撥函式。

  4. 錯誤處理: rejected 回撥函式用於處理錯誤。它也必須返回一個值或 Promise，或者丟擲一個錯誤。如果 rejected 回撥函式返回一個值或 resolved 的 Promise，則錯誤會被“消化”，鏈條會繼續執行，但後續的 fulfilled 回撥函式會收到這個返回值。如果 rejected 回撥函式丟擲錯誤或返回 rejected 的 Promise，則錯誤會繼續向上傳遞，最終被 catch 捕獲。

示例:

// 請求攔截器
axios.interceptors.request.use(
  config => {
    // 在傳送請求之前新增 token
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 處理請求錯誤
    return Promise.reject(error);
  }
);

// 響應攔截器
axios.interceptors.response.use(
  response => {
    // 處理響應資料
    return response.data;
  },
  error => {
    // 處理響應錯誤，例如 token 過期
    if (error.response.status === 401) {
      // 重定向到登入頁面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

總結:

Axios 攔截器透過鏈式呼叫和 Promise 提供了一種靈活的機制，可以在不修改核心業務邏輯的情況下，對請求和響應進行預處理和後處理，例如新增認證資訊、處理錯誤、轉換資料等，從而提高程式碼的可維護性和複用性。

相關文章