axios設置請求超時時間與超時取消請求

一、設置超時時間，超時取消請求

場景：調用第三方接口不太穩定，需要設置超時時間，超時取消請求並提示連接超時

使用cancelToken參數，axios自帶cancelToken參數

1.axios請求外部

const CancelToken = axios.CancelToken;
    let cancel;
    let timer = setTimeout(() => {
        cancel();
        this.$message.error("連接超時，請檢查網絡！")
    }, 10000);

2.axios請求內部

this.axios({
     method: "post",
     url,
     data,
     cancelToken: new CancelToken(function executor(c) {
         cancel = c;
     }),
 })
 .then((response) => {
     clearTimeout(timer);
     if (!response.data.hasError) {
         this.$message.success("數據獲取成功！");
         const results = response.data.result;
     } else {
         this.$message.error("數據獲取失敗！");
     }
 })
 .catch((error) => {
     clearTimeout(timer);
     if (error.response) {
         this.$message.error("數據獲取失敗！");
     }
 });

注意: 可以使用同一個 cancel token 取消多個請求

二、設置超時時間，超時重新請求

配置axios攔截器

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    // If config does not exist or the retry option is not set, reject
    if(!config || !config.retry) return Promise.reject(err);
    
    // Set the variable for keeping track of the retry count
    config.__retryCount = config.__retryCount || 0;
    
    // Check if we've maxed out the total number of retries
    if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(err);
    }
    
    // Increase the retry count
    config.__retryCount += 1;
    
    // Create new promise to handle exponential backoff
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });
    
    // Return the promise in which recalls axios to retry the request
    return backoff.then(function() {
        return axios(config);
    });
});

使用的時候，

1.retry - 第一次請求失敗后重試請求的次數。
2.retryDelay -在失敗請求之間等待的毫秒數(默認為1)。

axios.get('/some/endpoint', { retry: 5, retryDelay: 1000 })
    .then(function(res) {
        console.log('success', res.data);
    })
    .catch(function(err) {
        console.log('failed', err);
    });

 參考：https://www.jianshu.com/p/e58ff85b2a91