axios结合axios.CancelToken防止重复发请求的全局统一配置

在一个页面中我们一般不会去同时多次去请求一个接口，可以防止重复点击提交，防止用户重复点击等等，首先需要一个容器去存放某个请求，并且同时将这个请求的取消函数与这个请求一一对应起来

const CancelToken = axios.CancelToken
//声明一个存放请求以及和这个请求对应的取消函数，他们的关系是一一对应的
export const requestMap = new Map() // 请求池

// 创建axios实例
const httpService = axios.create({
     
  baseURL: baseUrl, // 需自定义
  withCredentials: true,
  // 请求超时时间
  timeout: 10000 // 需自定义
});

在请求拦截器里面

httpService.interceptors.request.use(
  config => {
     
 
  const uniqueCode = config.method + config.baseURL + config.url；
  	//说明这个请求池中存在这个请求，还在进行中并没有结束
    if (requestMap.get(uniqueCode)) {
     
      // 防止提交表单等时候重复发起同一个请求（所以这里只限制了post请求）
      if (config.method === 'post') {
     
        // 取消重复请求（取消掉后面重复的请求）直接取消当前的请求，请求还未发出就被取消了，所以浏览器不会生成取消的记录
        config.cancelToken = new CancelToken(cancel => cancel('请不要重复提交！'))//取消的是当前的请求
      }
    } else {
     
     //存贮请求的唯一标识作为健key: 对应的取消函数作为值 value
      config.cancelToken = new CancelToken(cancel => requestMap.set(uniqueCode, cancel))
    }
    return config;
  },
  error => {
     
    // 请求错误处理
    Promise.reject(error);
  }
);

响应拦截器

// respone拦截器
httpService.interceptors.response.use(
  response => {
     
     // 剔除请求池中完成的请求
    const uniqueCode = response.config.method.toLowerCase() + response.config.baseURL + response.config.url
    if (requestMap.get(uniqueCode)) {
     
      requestMap.delete(uniqueCode)
    }
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
     
      return Promise.resolve(response.data);
    } else {
     
      return Promise.reject(response);
    }
  },
  err => {
     
  	 // 出错剔除错误的请求(取消的请求没有走到这里)
    const uniqueCode = error.config.method.toLowerCase() + error.config.baseURL + error.config.url
    if (requestMap.get(uniqueCode)) {
     
      requestMap.delete(uniqueCode)
    }
  }