前端处理大量连续请求

最新推荐文章于 2024-08-27 13:51:43 发布

方方洛

最新推荐文章于 2024-08-27 13:51:43 发布

阅读量386

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_44898077/article/details/141225861

版权

前端在发送请求之后，在等待请求返回的时候处于空闲状态，仅对这个请求来讲，不需要处理任何事情。将处理请求结果的函数放到微任务队列里面，等请求返回之后再进行处理，就可以将这段时间释放，去做其他事情。使用这种方式发送多个请求，就可以实现并发的效果。

如果一个页面内的请求数量过多，请求的规模变大，就需要建立一个管理请求的队列，统一管理请求的发送和处理。目前主流的处理方案类似下面的代码：

function fetchQueue(urls: Promise<any>[], maxNum: number) {
  return new Promise((resolve, reject) => {
    if (urls.length === 0) {
      resolve([])
      return
    }

    const result = new Array(urls.length)
    let index = 0
    const request = async () => {
      const i = index
      const url = urls[index]
      index++
      try {
        const data = await url
        result[i] = data
      } catch (e) {
        result[i] = e
      } finally {
        if (index < urls.length) {
          request()
        } else {
          console.log(result)
          resolve(result)
        }
      }
    }

    for (let i = 0; i < Math.min(maxNum, urls.length); i++) {
      request()
    }
  })
}

上面的代码传入一个 Promise 数组 urls，在 request 函数中通过索引 index 取出队列里的 promise，然后自增 index，以 await 的方式等待取出的 promise 执行完成，最后在 finally 内部再次调用 request 函数，进行链式调用，不断的从队列中取出 promise，然后执行。

通过在 promise 的 finally 里面调用函数自身也可以达到这种效果，这里将其称为一个请求流程，该请求流程同步执行。fetchQueue 中通过 for 循环开启了多个这样的请求流程，可以达到并发的效果，并且控制最大请求数，避免过高的内存和性能占用。

如果队列里的请求没有得到补充，在将队列里的请求消耗完成之后，通过 for 循环开启的这些流程就会停止执行，不会再次开启。这时候可以为每一个流程分配一个状态，通过轮询这些流程的状态，在流程结束之后再次开启，这样就能应对需要发送大量连续请求的场景。伪代码如下：

const concurrency = 6
const state = new Array(concurrency).fill(false)
const urls = []
const request = (i: number) => {
    if (urls.length > 0) {
        state[i] = true
        ...
        finally(() => {
			request(i)
        })
        ...
    } else {
        state[i] = false
    }
}

setInterval(() => {
    for (let i = 0; i < concurrency; i++) {
        if (!state[i]) {
        	request(i)
        }
    }
}, 500)