Axios 取消重复请求

在实际开发中，我们需要对用户发起的重复请求进行拦截处理，比如用户快速点击提交按钮

解决办法

1、新建request.js

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: '', // api base_url
  timeout: 30000 // 请求超时时间
})

// 取消重复请求
const pending = []
const CancelToken = axios.CancelToken

// 移除重复请求
const removePending = (config) => {
  for (const key in pending) {
    const item = +key // 转number类型
    const list = pending[key]
    // 当前请求在数组中存在时执行函数体
    /**
     * 过滤需要重复调用的接口
     */
    const filterList = []
    if (
      !filterList.includes(config.url) &&
      list.url === config.url &&
      list.method === config.method &&
      JSON.stringify(list.params) === JSON.stringify(config.params) &&
      JSON.stringify(list.data) === JSON.stringify(config.data)
    ) {
      // 执行取消操作
      list.cancel('操作太频繁，请稍后再试')
      // 从数组中移除记录
      pending.splice(item, 1)
    }
  }
}

// 请求拦截器
service.interceptors.request.use(
  config => {
    removePending(config)
    config.cancelToken = new CancelToken((c) => {
      pending.push({
        url: config.url,
        method: config.method,
        params: config.params,
        data: config.data,
        cancel: c,
      })
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    removePending(response.config)
    return response
  },
  (error) => {
    const response = error.response
    // eslint-disable-next-line
    return Promise.reject(response || { message: error.message })
  }
)