vue axios 取消上一次（重复）请求

思路：

1.定义一个Map用来存储发送请求的取消【函数】标识。

2.在请求拦截器中，移出重复的请求【重复请求是指：方法 + 路径 + 入参 相同】。

3.在请求拦截器中，发送请求前存储取消标识到Map中。

4.在响应拦截器中，移出请求。

import axios  from "axios";
let pendingMap = new Map();

/**
 * 取消正在发送的请求
 * @param {*} config 
 */
let removePending = function(config){
    var key = `${config.method}:${config.url}:${JSON.stringify(config.params)}`;
    var func = pendingMap.get(key);
    if(func){
        func();
        pendingMap.delete(key);
    }
}

// 创建axios实例
const baseURL = "/api";
const requests = axios.create({
    baseURL:baseURL,
    timeout:5000
});

//请求拦截器
requests.interceptors.request.use((config) =>{
    removePending(config);
    // config 中包含 headers 请求头
    config.headers.Authorization = `Bear ${ sessionStorage.getItem("token")}`;

    // 发送请求,并将请求的取消标识放入pendingMap中
    config.cancelToken = new axios.CancelToken((cancelToken) => {
        pendingMap.set(`${config.method}:${config.url}:${JSON.stringify(config.params)}`,cancelToken)
    });
    return config;
});

//响应拦截器
requests.interceptors.response.use((res) => {
    // 请求成功移出请求
    removePending(res.config);
    return res.data;
},(error) => {
    return Promise.reject(error);
});

export default requests;