Vue通过axios实现接口防抖

一、使用步骤

1.引入方法

//引入axios
import axios from 'axios'
Vue.prototype.$axios = axios

代码如下（示例）：

//过滤请求事件
const stopRepeatRequest = (reqList, url, errorMessage) => {
    if (url.indexOf('upload/uploadChunkFile') !== -1 || url.indexOf('api/chat/getUserHistoryMsgs') !== -1 || url.indexOf('api/chat/ackUserOffLineMsgs') !== -1) {
        return false
    }
    if (reqList.length) {
       const arr = reqList.filter(item => item === url)
        if (arr.length) {
            console.log(errorMessage, 49)
            return true
        }
    }
    reqList.push(url)
}
//接口请求完成后清除
const allowRequest = (reqList, url) => {
    if (reqList.length) {
        requests = reqList.filter(item => item !== url)
    }
}
//请求
// request interceptor
request.interceptors.request.use(async config => {
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
//   if (token) {
//     config.headers['Access-Token'] = token
//   }
    const flag = await stopRepeatRequest(requests, config.url, `${config.url} 请求重复`)
    if (flag) {
        return
    }
    return config
})
//响应
request.interceptors.response.use(
    (response) => {
        allowRequest(requests, response.config.url) // 过滤掉已结束的请求
        //后边的代码正常编写
        })