axios全局重复请求取消

目的

避免重复请求，提高运行效率，在全局统一处理减少代码量

实现思路

具体实现

import axios from "axios";
import { getKey } from "./getkey";
export const request = axios.create({
  baseURL: import.meta.env["KING_BASE_URL"],
});

const cacheMap = new Map();
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    config.headers.icode = "hellosunday";
    const key = getKey(config);
    const controller = new AbortController();
    config.signal = controller.signal;
    console.log(cacheMap.has(key));
    if (cacheMap.has(key)) {
      console.log(cacheMap.get(key));
      cacheMap.get(key)();
    }
    cacheMap.set(key, controller.abort);
    console.log(cacheMap);

    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  },
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    const key = getKey(response.config);
    if (cacheMap.has(key)) {
      cacheMap.delete(key);
    }
    console.log("响应成功");
    return response;
  },
  function (error) {
    const key = error.config ? getKey(error.config) : null;
    if (key) {
      cacheMap.delete(key); // 无论成功或失败，请求结束后都应清理
    }
    if (error.code === "ERR_CANCELED") {
      return Promise.reject({ statusText: "请求正在进行中" });
    }
    return Promise.reject(error);
  },
);

取消请求的API

// 为新请求创建 controller 用于取消请求
const controller = new AbortController();
//标记请求可以被取消 config为请求的配置 注意这个属性必须是controller 
config.signal= controller .signal
//cancelToken.abort() 取消标记的请求
cache.set(key, controller.abort)
取消请求会进入响应拦截器的错误函数 也就是第二个函数
error.code === "ERR_CANCELED"//判断这个错误是否是取消请求导致的