axios取消重复请求

import axios from 'axios'
import Vue from 'vue'
import router from './router'
const http = axios.create({
    baseURL: 'http://localhost:3000/admin/api'
})

//  拦截重复请求
// 在网速较慢的情况下，容易出现用户多次点击而重复请求使得页面抖动的问题，用户体验不好，因此进行拦截重复请求的处理
// 创建请求队列 ---->
// -----拦截处理------
// 标识即将发送的请求---->
// 判断即将发送的请求与队列中的请求是否相同---->
// 若相同则执行当前请求的取消方法,并从请求队列中删除---->
// 创建即将请求的取消方法，放入队列中

const getRequestIdentify = (config, isReuest = false) => {
    let url = config.url;
    if (isReuest) {
        url = config.baseURL + config.url.substring(1, config.url.length);
    }
    return config.method === 'get' ? encodeURIComponent(url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data));
};
const pending = {};
const CancelToken = axios.CancelToken;
const removePending = (key, isRequest = false) => {
    if (pending[key] && isRequest) {
        pending[key]('取消重复请求');
    }
    delete pending[key];
};

http.interceptors.request.use(function (config) {
    // Do something before request is sent
    // 拦截重复请求(即当前正在进行的相同请求)

    const requestData = getRequestIdentify(config, true); // 标识请求
    removePending(requestData, true);// 取消重复请求
    config.cancelToken = new CancelToken((c) => { // 创建当前请求的取消方法
        pending[requestData] = c;
    });

    if (localStorage.token) {
        config.headers.Authorization = 'Bearer ' + localStorage.token
    }
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});


// Add a response interceptor
http.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    console.dir(error);
    if (error.response.data.message) {
        Vue.prototype.$message.error(error.response.data.message)
    }

    if (error.response.status === 401) {
        router.push('/login')
    }
    return Promise.reject(error);
});
export default http