axios取消重复请求(保留第一次，取消之后的重复请求)_axios重复请求只执行一次-优快云博客

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/124877048

博客讨论了如何在使用axios时处理重复请求的问题，尤其是对于登录等操作，避免因用户频繁点击导致的请求冲突。作者修改了现有的解决方案，以确保相同的请求仅保留第一次，后续的重复请求会被取消。在实施过程中，作者发现一个bug，即响应后的请求无法正确从map中删除，原因是生成requestKey的方法在不同阶段产生了不一致的结果。通过创建两个不同的requestKey生成函数，分别用于添加请求和响应时使用，问题得到了解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在网上找了一个axios解决重复请求的代码

import axios from 'axios'
axios.defaults.baseURL = 'http://124.93.196.45:10001/'
const pendingRequest = new Map()

//`generateReqKey`：用于根据当前请求的信息，生成请求 Key；
function generateReqKey(config: any) {
  const { method, url, params, data } = config
  return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&')
}

//`addPendingRequest：用于把当前请求信息添加到pendingRequest对象中；
function addPendingRequest(config: any) {
  const requestKey = generateReqKey(config)
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken((cancel: any) => {
      if (!pendingRequest.has(requestKey)) {
        pendingRequest.set(requestKey, cancel)
      }
    })
}

//`removePendingRequest`：检查是否存在重复请求，若存在则取消已发的请求。
function removePendingRequest(config: any) {
  const requestKey = generateReqKey(config)
  if (pendingRequest.has(requestKey)) {
    const cancelToken = pendingRequest.get(requestKey)
    cancelToken(requestKey)
    pendingRequest.delete(requestKey)
  }
}
function clearPending() {
  for (const [requestKey, cancelToken] of pendingRequest) {
    cancelToken(requestKey)
  }
  pendingRequest.clear()
}
axios.interceptors.request.use(
  function (config: any) {
    removePendingRequest(config) // 检查是否存在重复请求，若存在则取消已发的请求
    addPendingRequest(config) // 把当前请求信息添加到pendingRequest对象中

    return config
  },
  (error) => {
    // 这里出现错误可能是网络波动造成的，清空 pendingRequests 对象
    pendingRequest.clear()
    return Promise.reject(error)
  }
)
axios.interceptors.response.use(
  (response) => {
    removePendingRequest(response.config) // 从