【VUE】axios请求失败，自动发起重试请求

axios 利用interceptors(拦截器)完美解决自动重试问题。

Axios 是一个基于 Promise 的 HTTP 客户端，而 HTTP 协议是基于请求和响应：

所以 Axios 提供了 请求拦截器和响应拦截器 来分别处理请求和响应，它们的作用如下：

• 请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。

• 响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

import axios from 'axios'

// 重试次数，共请求2次
axios.defaults.retry = 1

// 请求的间隙
axios.defaults.retryDelay = 1000

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    // 如果配置不存在或未设置重试选项，则拒绝
    if (!config || !config.retry) return Promise.reject(err);

    // 设置变量以跟踪重试次数
    config.__retryCount = config.__retryCount || 0;

    // 判断是否超过总重试次数
    if (config.__retryCount >= config.retry) {
        // 返回错误并退出自动重试
        return Promise.reject(err);
    }

    // 增加重试次数
    config.__retryCount += 1;

    //打印当前重试次数
    console.log(config.url +' 自动重试第' + config.__retryCount + '次');

    // 创建新的Promise
    var backoff = new Promise(function (resolve) {
        setTimeout(function () {
            resolve();
        }, config.retryDelay || 1);
    });

    // 返回重试请求
    return backoff.then(function () {
        return axios(config);
    });
});

axios.get('https://www.google.com', {
        retry: 5,
        retryDelay: 1000,
        timeout: 6000
    })
    .then(res=> {
        console.log('success', res.data);
    })
    .catch(err=> {
        console.log('failed', err);
    });