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

学习资源

并发请求 【渡一教育】

完整代码

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，否则成为串行，无法实现并发请求。