axios多次相同请求，取消下一次

使用axios的请求拦截器拦截多次相同请求，在网上看到了一篇博客，但是他是多次相同请求，取消上一次，而我们的需求是取消下一次，所以要改一下。

在这里，两次请求的url和data相同，我们即认为是相同请求。

核心方法是用axios提供的取消函数，在请求发送之前取消掉。话不多说，直接上代码

import axios from "axios"
// import router from "../router/index"
import {Message} from 'element-ui'

let baseURL = process.env.baseUrl

function returnMsg(resultMsg) {
    Message({
        message: resultMsg,
        type: 'warning'
    });
}

let request = axios.create({
    baseURL: baseURL,
    headers: {
        'Cache-Control': 'no-cache', //禁止从缓存读取
        'Pragma': 'no-cache'
    }
});

const paramsStr = params => {
    let str = "";
 let str = "";
    if (typeof params === "undefined") {
        str = ""
    }else if (typeof params === "object") {
        Object.keys(params).forEach(key => {
            const element = params[key];
            if (element || element == 0) {
                if (str) {
                    str += `&${key}=${element}`;
                } else {
                    str += `?${key}=${element}`;
                }
            }
        });
    } else {
        str = `?${params}`;
    }
    return str;
}

// 存储所有的请求
var promiseArr = []

let s = 1.5 //单位秒，ajax取消延后时间
let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    // console.log(new Date().getTime()-pending[pending.length - 2].t)
    if (pending.length > 1 && pending[pending.length - 2].u === config.url + paramsStr(config.data||config.params) && pending[pending.length - 1].t - pending[pending.length - 2].t < s * 1000) {
        console.log("ajax取消操作")
        pending[pending.length-1].f(); //执行取消操作
        pending.splice(pending.length, 1);
    }
}


// 添加请求拦截器
request.interceptors.request.use(function (config) {
    config.cancelToken = new cancelToken((c) => {
        // 用请求地址&请求参数拼接的字符串
        pending.push({u: config.url + paramsStr(config.data||config.params), t: new Date().getTime(), f: c});
    });
    removePending(config)
    return config;
}, function (error) {
    return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use(function (response) {
    if (response.data.code != 200) {
        returnMsg(response.data.message)
    }
    return response.data;
}, function (error) {
    return Promise.reject(error);
});

export default request