Vue项目请求超时处理

Posted 2023-04-23

参考技术A 现在网页项目大多采用前后端分离模式，这种模式优点有很多，但是也会带来不少问题，比如：请求后端接口时会受网络因素影响，导致请求超时；这就需要我们在请求方法中设置拦截，对请求超时做处理；

下面就是我在项目中使用的axios封装方法，设置网络请超时拦截处理

请求超时VUE axios重新再次请求

//在main.js设置全局的请求次数，请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;

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);
    });
});