前言

一旦給 axios 添加了攔截器，就會對所有的 post、get 等請求進行攔截。但不是所有的請求都需要進行攔截，如公共的請求，即不需要用戶登錄即可發起請求的 api 我們應當放行。

1. 通過 axios.interceptors.request.eject(requestId) 清除 request 或者 response 的攔截器。想要再次恢復就需要重新創建攔截器。
2. 第二種通過 axios.CancelToken.source() 更加靈活地處理需攔截的邏輯，如只需要攔截沒有登錄的請求，不需要所有請求都需要登錄，並可處理本次的錯誤消息。

axios CancelToken

1. 創建 axios.CancelToken.source() CancelToken 的實例。
2. 在攔截器中或者其他任何地方通過 CancelToken 提供的 cancel 函數取消本次請求，並提供錯誤消息。

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:9000/api/v1"
});

// 將 cancelSource 掛載到 axiosInstance 實例上
axiosInstance.cancelSource = axios.CancelToken.source();
// isCancel 是判斷當前錯誤是否為主動取消攔截器的錯誤，同樣掛載到 axios 實例上
axiosInstance.isCancel = axios.isCancel;

axiosInstance.interceptors.request.use(
  config => {
    if (!localStorage.getItem("userId")) {
      // 用戶沒有登陸，停止添加了 cancelToken 的請求，並給出本次請求失敗的錯誤消息
      axiosInstance.cancelSource.cancel("您沒有登陸，本次操作取消！");
    }
    
    // 其他攔截的業務邏輯，如攔截一次性請求發了很多次等。可見 CancelToken 很靈活

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

export { axiosInstance };

針對特定請求的攔截

1. 在本次請求中，需要驗證用戶是否登錄，因此在請求配置項中添加 { cancelToken: axiosInstance.cancelSource.token }。
2. 程式發起請求之後，經過請求的攔截器。
3. 若沒有登陸，取消本次請求，併進入 catch 塊，處理錯誤。
4. 若登錄，不取消本次請求，請求可以完整執行。

export async function setCollection(bodyData) {
  try {
    const { data: completed } = await axiosInstance.post(
      "/set/collection",
      bodyData,
      // 本次請求需要用戶登錄才可以發出
      { cancelToken: axiosInstance.cancelSource.token }
    );
    return completed;
  } catch (error) {
    // 判斷檔次錯誤是否為因沒有登陸（cancelToken）導致的錯誤
    if (axiosInstance.isCancel(error)) {
      ElMessage.warning(error.message);
    } else {
      throw error;
    }
  }
}

小結

通過 axios 提供的 CancelToken 可以標識本次請求是否需要經過攔截器中的判斷同意通過才可發起。

1. 在攔截器中，用戶沒有登錄時，通過 CalcenToken 提供的 cancel 取消本次請求。
2. 在攔截器中，用戶沒有登陸時，通過 CalcenToken 提供的 cancel 函數傳遞本次錯誤的消息。
3. 給單次的請求中添加一項，{ cancelToken: axiosInstance.cancelSource.token } 配置項，表示本次請求需要驗證 cancelToken。