封装拦截器

添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

# axios请求失败后发起二次请求

 import axios from 'axios'
  // 重试次数，共请求2次 
  axios.defaults.retry = 1 
  // 请求的间隙 
  axios.defaults.retryDelay = 1000

  axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {     
   // 发送请求后返回错误状态码的那个接口的请求配置，都存在宇err.config里面     
  let config = err.config;
    // 如果配置不存在或未设置重试选项，则拒绝     
    // 重试请求的次数，如果你设置了1，就请求2次，如果是5，就请求6次     
  if (!config || !config.retry) return Promise.reject(err);
    // 设置变量以跟踪重试次数     
    config.__retryCount = config.__retryCount || 0;
    // 判断是否超过总重试次数,超过retry设置的次数的时候，就不再重复发起请求了     
    if (config.__retryCount >= config.retry) {         
    // 返回错误并退出自动重试         
    return Promise.reject(err);     
    }
    // 增加重试次数     
    config.__retryCount += 1;
    // 创建新的Promise     
    let backoff = new Promise(function (resolve) {         
    setTimeout(function () {            
    resolve();         }, config.retryDelay || 1);     
    });     
    // 返回重试请求     
    return backoff.then(function () {        
    return axios(config);     
        });
    }); 
    export default axios;

axios 放置重复请求

import axios from "axios"; 
const http = axios.create({ 
baseURL: process.env.VUE_APP_BASE_URL,//公共路径 
}); 
//取消请求 
let httplist = [] 
const removeHttp = config => { 
    let index = httplist.findIndex(v => v.url === config.url && v.method === config.method) 
    if (index >= 0) { 
    //取消请求 
    httplist[index].controller.abort() 
    //删除当前数据 
    httplist.splice(index, 1) 
    } } 
http.interceptors.request.use( 
    function (config) { 
    removeHttp(config) 
    //取消操作 
    //在push之前遍历数组找到相同的请求取消掉 
    const controller = new AbortController() 
    config.signal = controller.signal //用来取消操作的key 
    config.controller = controller //将控制器绑定到每个请求身上 
    httplist.push({ ...config }) //每次的请求加入到数组 
    return config 
    }, 
    function (error) { 
    // 对请求错误做些什么 
    return Promise.reject(error) 
    } 
    )
    // 添加响应拦截器 
 http.interceptors.response.use( 
 function (response) { 
   // 2xx 范围内的状态码都会触发该函数。 
   // 对响应数据做点什么 
   const { data } = response; 
   return data; }, function (error) { 
   // 超出 2xx 范围的状态码都会触发该函数。 
   // 对响应错误做点什么 
   return Promise.reject(error); 
   } 
 );