JavaScript处理多个重复请求

一，问题产出

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

二、处理方式

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

三、解决方式

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

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