axios通过cancelToken对象来取消用户重复提交的请求

axios通过cancelToken对象来取消用户重复提交的请求配置，如下：

import axios from 'axios';

//获取cancelToken对象
const CancelToken = axios.CancelToken;
//缓存对应的api和对应的cancelToken实例化对象
let cancelTokenMap = new Map();
const service = axios.create({
    baseURL: process.env.BASE_URL,
    timeout: 5000
});

service.interceptors.request.use(
    config => {
        //通过url和method作为key，但最好能加上用户的token来确保对应的用户的请求
        let key = config.url + "-" + config.method;
        //判断是否已经存在的请求，如果有就执行其对应的cancelToken的实例方法进行终止请求
        if (cancelTokenMap.has(key)) {
            cancelTokenMap.get(key)();
        }
        config.cancelToken = new CancelToken((c) => {
            //获取每个请求的cancelToken的实例
            cancelTokenMap.set(key, c);
        })

        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        //请求完成时，删除对应的请求缓存数据
        let key = response.config.url + "-" + response.config.method;
        if (cancelTokenMap.has(key)) {
            cancelTokenMap.delete(key);
        }
        

        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        debugger
        console.log(error);
        return Promise.reject();
    }
);

export default service;

只需要三步：

第一步，声明cancelToken对象和缓存cancelToken的变量：

//获取cancelToken对象
const CancelToken = axios.CancelToken;
//缓存对应的api和对应的cancelToken实例化对象
let cancelTokenMap = new Map();

第二步： 在service.interceptors.request.use( config => {}）里面获取对应请求的cancelToken实例对象和判断是否存在相同的请求，如果存在就取消之前的请求。配置：

//通过url和method作为key，但最好能加上用户的token来确保对应的用户的请求
let key = config.url + "-" + config.method;
  //判断是否已经存在的请求，如果有就执行其对应的cancelToken的实例方法进行终止请求
  if (cancelTokenMap.has(key)) {
      cancelTokenMap.get(key)();
  }
  config.cancelToken = new CancelToken((c) => {
      //获取每个请求的cancelToken的实例
      cancelTokenMap.set(key, c);
  })

第三步： 请求完成后，删除对应的缓存数据。在service.interceptors.response.use( response => {}）里面配置，如下：

 //请求完成时，删除对应的请求缓存数据
 let key = response.config.url + "-" + response.config.method;
 if (cancelTokenMap.has(key)) {
     cancelTokenMap.delete(key);
 }