前端js并发请求封装

        今天在抖音上刷到博主：渡一Web前端学习频道    的一篇关于前端js并发请求的封装，感觉很好，记录一下，以待后用。

//参数：urls------>待请求的url数组
        maxNum---->最大并发数

function concurRequest(urls,maxNum){
				return new Promise((resolve)=>{
					//如果请求数组为空时，直接返回空数组
					if(urls.length == 0){
						resolve([]);
						return;
					}
					//存储结构的数组
					const results = [];
					//下一个请求的下标
					let index = 0;
					//请求完成数
					const count = 0;
					//发送请求
					async function request(){
						//存储执行请求时的下标，以方便将结果插入到results数组对应的位置
						const i = index;
						//取出本次请求是的链接
						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('over');
								resolve(results);
							}
							request();
						}
					}
					
					//设置并发请求
					//获取并发数和请求数组长度的小值作为并发请求的次数
					const times = Math.min(maxNum,urls.length)
					for(let i=0;i<times;i++){
						request();
					}
				})
			}

 

        使用

       

//使用
const urls = [];
for(let i=0;i<=100;i++){
	urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
			
concurRequest(urls,20).then((resps)=>{
	console.log(resps)
})