vue axios 当响应超时后重新请求接口

 转载转载转载

补充了详细注释

设置超时重发时间/重试次数限制，重新请求间隔

import axios from 'axios';

// 重新发起请求的参数
axios.defaults.retry = 20;
axios.defaults.retryDelay = 6000;

export const timeOutRequest = axios.create({
  baseURL: ***,
  timeout: 10 * 1000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
});

// 给axios添加拦截器，请求错误/超时时执行相应处理操作
timeOutRequest.interceptors.response.use(undefined, err => {
  const config = err.config;
  if (!config || !config.retry) return Promise.reject(err);
  // 手动给config添加当前重试次数的属性
  config.__retryCount = config.__retryCount || 0;

  // 达到上限时reject
  if (config.__retryCount >= config.retry) {
    return Promise.reject(err);
  }

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

  // 定时器在达到重试间隔时resolve往下执行
  const backoff = new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, config.retryDelay || 1);
  });

  // 返回一个promise，在定时器结束后重新调用timeOutRequest(config)发起请求，timeOutRequest之前创建的实例
  return backoff.then(() => timeOutRequest(config));
});