axios拦截器拦截重复请求

取消重复请求

万能模板。

import axios from 'axios'
const  baseURL = "http://xxxx";
const instance = axios.create({ baseURL: baseURL, timeout: 30000 });
// 定义存放已发送但未响应的请求
const requestMap = new Map();
// 获取请求的唯一标识
const getRequestIdentify = (config, isReuest = false) => {
  // 由于不同项目的实现方式略有不同，url、params和data的格式可能略有不同，使用该方法时要根据实际情况进行调试修改
  let url = config.url
  if (isReuest) {
    url = url.startsWith('/') ? baseURL + url : baseURL + '/' + url;
  }
  return config.method === 'get' ? encodeURI(url + JSON.stringify(config.params)) : encodeURI(url + (typeof config.data === 'string' ? config.data : JSON.stringify(config.data)))
}
// HTTPrequest拦截
instance.interceptors.request.use(config => {
  const requestData = getRequestIdentify(config, true);
  if (requestMap.has(requestData)) {
    // map中存在该请求，不再重复发起
    return Promise.reject(new Error('重复请求'))
  } else if (!config.canReapeat) {
    // 通过在请求中设置 canReapeat 参数，允许特殊接口的重复提交
    // 若map中没有该请求，则将请求存入map，并发起请求
    requestMap.set(requestData, true)
  }
  //...
  return config
}, error => {
  return Promise.reject(error)
})
 
// HTTPresponse拦截
instance.interceptors.response.use(res => {
  const requestData = getRequestIdentify(res.config);
  // 请求获得响应后，将该请求从map中移除，以使后面的请求正常发送。
  if (requestMap.has(requestData)) {
    requestMap.delete(requestData)
  }
  let data = res.data;
  if(data.code==666){
    return data;
  }
}, (error) => {
  return Promise.reject(new Error(error))
})