請求重試函數(shù)：這里注意兩個變量__retryCount 和retry分別代表當(dāng)前次數(shù)和重試次數(shù)。如果請求中沒有配置retry則正常進(jìn)行不會進(jìn)行重試。

// 請求重試
async function requestAgainSend(
  err: AxiosError<any, any> & newConfig,
  axios: AxiosInstance,
) {
  const config: AxiosRequestConfig & newConfig = err.config || {};
  if (!config || !config.retry) {
    return Promise.reject(err);
  }
  config.__retryCount = config.__retryCount || 0;
  // 判斷是否超過
  if (config.__retryCount >= config.retry) {
    return Promise.reject(err);
  }
  // 重試次數(shù)
  config.__retryCount += 1;
  // 延時處理
  const backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve("success");
    }, 1000);
  });
  await backoff;
  return await axios(config);
}

請求取消我這里的場景是路由切換時，將上次路由全部取消也可以配置部分取消。注意變量noCancel，他來控制那些不需要被取消。

回顧axios請求取消的幾種使用方式：1. 第一種使用AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消請求
controller.abort()

第二種：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消請求（message 參數(shù)是可選的）
source.cancel('Operation canceled by the user.');

我是用的是第三種：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數(shù)接收一個 cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
});

// 取消請求
cancel();

思路：全局維護(hù)一個函數(shù)集合，其中每一項為cancel()，在請求攔截中添加此函數(shù)到集合中，在beforeEach中執(zhí)行每一個函數(shù)并清空集合。

// 在pinia中維護(hù)集合和方法，方便調(diào)用
import { defineStore } from "pinia";

export const requestStore = defineStore("request", () => {
  const cancelReqList = ref([]);
  const addCancelReq = (cancel: any) => {
    const maxCancelTokenNum = 30; // 最大存cancelToken條數(shù)
    if (cancelReqList.value.length >= maxCancelTokenNum) {
      cancelReqList.value.shift();
    }
    cancelReqList.value.push(cancel);
  };
  const removeCancelReq = (index: any) => {
    cancelReqList.value.splice(index, 1);
  };
  return { cancelReqList, addCancelReq, removeCancelReq };
});



// 請求攔截中添加取消函數(shù)
service.interceptors.request.use(
  (config: any) => {
    if (!config.noCancel) {
      config.cancelToken = new axios.CancelToken((c) => {
        requestStore().addCancelReq(c);
      });
    }
    
  },
  (err: AxiosError<any, any>) => {
    return Promise.reject(err);
  },
);


// 在router beforeEach路由切換時依次執(zhí)行。
router.beforeEach(async (to, form, next) => {
  ...
  const { cancelReqList, removeCancelReq } = requestStore();
  cancelReqList.forEach((cancel, index) => {
    cancel();
    removeCancelReq(index);
  });
});

出現(xiàn)的問題

類似這種錯誤報名你取消請求成功了，但是error的結(jié)構(gòu)不再是以前的結(jié)構(gòu)了

if (error instanceof axios.Cancel) return;文章來源地址http://www.zghlxwxcb.cn/news/detail-833452.html

到了這里，關(guān)于封裝axios請求重試和路由切換時請求取消的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！