JavaScript实现控制并发请求数量的方法详解

作者:纸飞机时间:2026-11-01 01:57:19浏览:521

本文详细解析如何在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控制并发请求数量的资料请关注本站其它相关文章!

作者最新文章