JavaScript处理多个重复请求_js 多次提交-CSDN博客

本文链接：https://blog.csdn.net/Anything2207294253/article/details/125932135

本文探讨了在前端开发中如何处理重复HTTP请求的问题，指出不处理重复请求可能导致资源浪费和请求阻塞。提出了一种解决方案，即通过初始化请求列表，检查待发送请求是否已存在，从而决定是否返回现有Promise或发起新请求。这种方法能够有效地减少无效请求，提高用户体验。

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

一，问题产出

我们在不同组件出来多次重复的请求，地址，参数相同

二、处理方式

不对重复请求做处理；
- 缺点1：造成不必要的资源浪费，增大服务器的压力。
- 缺点2：http请求在浏览器中有并发数限制的，如果页面首屏请求较多没有分层级加载的话，很容易造成请求阻塞，影响用户第一时间看到页面内容。
对重复请求直接return掉，这种做法有局限性，就是直接认定后面的重复请求均为无效请求
1. 无效请求场景：点击某个按钮进行查询或者保存操作，在请求结果返回之前，后面点基本都算是无效请求，这种请求应该被阻止。当然，也可以通过节流/防抖来规避这个问题。
2. 什么时候不适用于此方法，请求之后页面需要展示页面。

三、解决方式

初始化一个数组；
在请求发送前，根据入参是否相同判断是否为重复请求
1. 非重复请求，把请求的参数和请求返回的Promise添加至数组中
2. 重复请求，使用find查找直接返回对应的Promise
请求完成后把数组中之前添加的请求信息移除

let handleList = [] //请求列表

/*
 *请求相关处理
 *@params url
 *@params requestObj  请求参数
 *@return {Promise} 请求的promise
 */
function request(url,requestObj={}){
    const sameHandle = handleList.find(
    (item) => item.url === url && JSON.stringify(item.requestObj) === JSON.stringify(requestObj)
  )
  if (sameHandle) {
    // 遇到相同请求直接返回之前请求的promise
    console.log(`存在重复请求，直接返回`)
    return sameHandle.handle
  }
  const handle = new Promise((resolve, reject) => {
    new Promise.resolve()
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
      .finally(() => {
        // 无论请求结果如果，都需要把对应的请求移除掉
        handleList = handleList.filter(
              (item) =>
                item.url !== url && JSON.stringify(item.requestObj) !== JSON.stringify(requestObj)
            )
      })
  })
  handleList.push({ url, requestObj, handle })
  return handle
}

参考文章，谢谢此朋友的方法，很好用

https://www.jb51.net/article/213282.htm