「跟着渡一学前端」并发请求实现

学习资源#

并发请求 【渡一教育】

完整代码#

function concurRequest(urls, maxNum) {
  if (urls.length === 0) {
    return Promise.resolve([]);
  }
  return new Promise((resolve) => {
    let nextIndex = 0;
    let finishCount = 0;
    const result = [];

    async function _request() {
      if (nextIndex >= urls.length) {
        return;
      }
      const i = nextIndex;
      const url = urls[nextIndex++];
      const resp = await fetch(url);
      result[i] = resp;
      finishCount++;
      if (finishCount === urls.length) {
        resolve(result);
      }
      _request();
    }
    for (let i = 0; i < Math.min(maxNum, urls.length); i++) {
      _request();
    }
  })
}

知识详解#

• 使用场景：大文件上传，分片后通过控制并发数上传。

• 编写思路：

  1. 判断边界条件（看需要请求urls是否为空数组）

  2. 返回一个Promise结果

  3. 确定运行逻辑。

     1. 获取url进行请求。

        

        ⚠️注意：当前代码只适用于get请求，若为post请求需要加入请求配置。

     2. 得到请求结果塞入结果数组。

        

        ⚠️注意：不能使用push添加请求结果。——因为请求顺序不一定等于返回顺序。

     3. 待请求列表补位请求。（保证带宽是满的）

        

     4. 所有请求结束处理。

        

     5. 并发控制

        

        ⚠️注意：不能使用awit，否则成为串行，无法实现并发请求。