前言
一旦給 axios 添加了攔截器，就會對所有的 post、get 等請求進行攔截，但不是所有的請求都需要進行攔截，如公共的請求，即不需要用戶登錄即可發起請求的 api 我們應當放行，
- 通過
axios.interceptors.request.eject(requestId)清除 request 或者 response 的攔截器，想要再次恢復就需要重新創建攔截器， - 第二種通過
axios.CancelToken.source()更加靈活地處理需攔截的邏輯，如只需要攔截沒有登錄的請求，不需要所有請求都需要登錄，并可處理本次的錯誤訊息，
axios CancelToken
- 創建
axios.CancelToken.source()CancelToken 的實體， - 在攔截器中或者其他任何地方通過 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 };
針對特定請求的攔截
- 在本次請求中，需要驗證用戶是否登錄，因此在請求配置項中添加
{ cancelToken: axiosInstance.cancelSource.token }， - 程式發起請求之后，經過請求的攔截器，
- 若沒有登陸，取消本次請求，并進入 catch 塊，處理錯誤，
- 若登錄，不取消本次請求，請求可以完整執行，
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 可以標識本次請求是否需要經過攔截器中的判斷同意通過才可發起，
- 在攔截器中，用戶沒有登錄時，通過
CalcenToken提供的cancel取消本次請求， - 在攔截器中，用戶沒有登陸時，通過
CalcenToken提供的cancel函式傳遞本次錯誤的訊息， - 給單次的請求中添加一項，
{ cancelToken: axiosInstance.cancelSource.token }配置項，表示本次請求需要驗證 cancelToken，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552546.html
標籤：JavaScript
上一篇：正則運算式 基礎
下一篇：返回列表