JavaScript实现控制并发请求数量的方法详解
本文详细解析如何在JavaScript中限制同一时刻的并发请求数量。通过设计思路分析与代码实现,展示如何利用Promise和队列机制控制最大并发数,确保结果按顺序返回,并处理边界情况,适用于需要优化网络请求性能的前端场景。
前言
大家好,时隔近一个月再次更新文章,非常想念各位读者!今天继续推进技术分享,毕竟技术之路需要不断深耕。之所以间隔这么久才更新,是因为之前没有发现值得深入探讨的优质素材,而今天恰好遇到了一个值得分享的话题,所以准时与大家见面。
本次分享的主题源自近期与同事讨论时偶然发现的知识点:前端如何有效控制并发请求的数量。如果你在实际项目中遇到过类似需求,对此应该不陌生;若尚未接触且不了解,建议耐心阅读本文,相信你能从中获得实用的解决方案。
场景
假设存在这样一个场景:需要发送20个异步请求,但出于性能或服务器限制等原因,必须将同一时刻的并发请求数控制在3个以内,同时尽可能快速地获取响应结果。此类场景常出现在大厂面试题中,例如:
实现一个并发请求函数concurrencyRequest(urls, maxNum),具体要求如下:
• 限制最大并发数为 maxNum
• 每当有一个请求返回,释放一个槽位,即可发起新的请求
• 所有请求完成后,结果需按照 urls 数组中的原始顺序依次输出(发送请求可直接使用 fetch 函数)
面对此类问题,你该如何着手解决?
解决此类问题,首先需理清设计思路。
设计思路
将上述文字描述转化为图形后,效果如下:

这样即可直观地看到,存在一个最大并发数maxNum,20个异步请求的urls集合,以及并发返回后的results集合。
接下来演示该思路的具体执行过程,如下:

首先,根据每次仅允许并发3个请求的要求,这里对应A、B、C。当其中一个请求完成后,再从urls中取出下一个请求进行发送,依此类推,直到urls中的20个请求全部执行完毕,请求过程终止。

上述为主要思路,但在实际开发中需考虑以下特殊情况:
- • 当
urls的长度为0时,results无值,此时应直接返回空数组 - • 当
maxNum大于urls的长度时,应取urls的长度;否则取maxNum - • 需定义一个
count计数器,用于判断是否所有请求已完成 - • 无论请求成功或报错,均需将结果保存在
results集合中 - •
results中的结果顺序需与urls中的顺序保持一致
基于上述设计思路,接下来进入开发环节。
开发
具体代码如下(代码中已包含详细注释):
// 并发请求函数
const concurrencyRequest = (urls, maxNum) => {
return new Promise((resolve) => {
if (urls.length === 0) {
resolve([]);
return;
}
const results = [];
let index = 0; // 下一个请求的下标
let count = 0; // 当前请求完成的数量
// 发送请求
async function request() {
if (index === urls.length) return;
const i = index; // 保存序号,使result和urls相对应
const url = urls[index];
index++;
console.log(url);
try {
const resp = await fetch(url);
// resp 加入到results
results[i] = resp;
} catch (err) {
// err 加入到results
results[i] = err;
} finally {
count++;
// 判断是否所有的请求都已完成
if (count === urls.length) {
console.log('完成了');
resolve(results);
}
request();
}
}
// maxNum和urls.length取最小进行调用
const times = Math.min(maxNum, urls.length);
for(let i = 0; i < times; i++) {
request();
}
})
}
测试
测试代码如下:
const urls = [];
for (let i = 1; i <= 20; i++) {
urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
concurrencyRequest(urls, 3).then(res => {
console.log(res);
})
结果
通过运行代码查看实际效果:
首先查看控制台输出的结果,如下:


可以看到20个请求均已完成,results中结果也按顺序打印输出。
接着检查请求时的数量是否每次均为3个,如下:

通过上述gif图可直观看到,每次发起的请求数量均为3个,证明代码逻辑正确,实现完毕。
至此,这个在实际开发中常见的前端控制并发请求需求已实现。代码难度适中,关键在于充分考虑各种边界情况,确保实现无误。希望读者阅读后能轻松掌握前端控制并发数量的技巧。
以上就是JavaScript实现控制并发请求数量的方法详解的详细内容,更多关于JavaScript控制并发请求数量的资料请关注本站其它相关文章!
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
