axios取消重复请求

const pendingRequest = new Map();

// 请求生成一个唯一得key
function generateReqKey(config) {
    const { method, url, params, data } = config;
    return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

// 唯一得key，添加到Map集合中
function addPendingRequest(config) {
  const requestKey = generateReqKey(config); // 生成唯一得key
  // 保存cancelToken,用于取消请求
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingRequest.has(requestKey)) { // 检查集合中是否存在
       pendingRequest.set(requestKey, cancel); // key添加到集合中
    }
  });
}

// 取消请求，删除唯一的key
function removePendingRequest(config) {
    const requestKey = generateReqKey(config); // 生成唯一得key
    if (pendingRequest.has(requestKey)) { // 检查集合中是否存在
        const cancelToken = pendingRequest.get(requestKey); // 获取key，对应的CancelToken
        cancelToken(requestKey); // 取消请求
        pendingRequest.delete(requestKey); // 删除唯一得key
    }
}

请求拦截器

axios.interceptors.request.use(
  function (config) {
    removePendingRequest(config); // 检查是否存在重复请求，若存在则取消已发的请求
    addPendingRequest(config); // 把当前请求信息添加到pendingRequest对象中
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);

响应拦截器

axios.interceptors.response.use(
    (response) => {
        removePendingRequest(response.config); // 从pendingRequest对象中移除请求
            return response;
        },
    (error) => {
    removePendingRequest(error.config || {}); // 从pendingRequest对象中移除请求
        if (axios.isCancel(error)) {
            console.log("已取消的重复请求：" + error.message);
        } else {
            // 添加异常处理
        }
        return Promise.reject(error);
    }
);