前言:笔者在校招面试中,被问到
promise
,让实现一到并发请求的题目,也是非常经典,在平时前端业务中,经常会遇到要处理的,今天我们一起来看下这道题目⬇️
分析
根据需求,我们需要设计一个能够动态管理并发请求的机制,确保同时运行的请求数量不会超过指定的最大值。当某个请求完成时,若还有待处理的请求,则立即从队列中取出下一个请求并开始执行。最终,当所有请求都完成后,将结果以数组形式返回给调用者。
题目:
实现一个并发请求控制
要求:实现一个函数,传入urls数组和最大并发数,当并发请求数大于最大并发数时,控制并发请求,当请求完成时,继续请求,直到所有请求完成,这里要求并发只要有一个完成,此时请求排队队列里面还有请求的话,取出来加入到并发请求中
[重点]
/**
* @urls urls数组
* @maxConcurent 最大并发数
* @returns 请求的结果数组
*/
function concurrentRequest(urls,maxConcurrent){
// 代码实现逻辑
}
代码实现
function concurrentRequest(urls, maxConcurrent) {
// 存储所有请求的结果
let results = [];
// 当前活跃请求的计数
let activeCount = 0;
// 请求的序号,用于跟踪结果数组中的位置
let currentIndex = 0;
return new Promise((resolve, reject) => {
// 执行请求的函数
const executeRequest = async (url, index) => {
activeCount++; // 增加活跃请求计数
try {
// 模拟请求,这里用fetch,实际使用时应根据实际情况替换
// const response = await fetch(url);
// const data = await response.json();
const res = await url();
results[index] = res;
// results[index] = data; // 保存请求结果
console.log(`urls[${index + 1}]请求完成了,结果为:${res}`);
} catch (error) {
results[index] = error; // 保存请求错误
console.log(`urls[${index + 1}]请求失败了了,结果为:${error}`);
} finally {
activeCount--; // 请求完成后减少活跃请求计数
if (currentIndex < urls.length) {
// 如果还有URL待请求,启动下一个请求
console.log(`urls[${currentIndex}]开始请求了...`);
executeRequest(urls[currentIndex], currentIndex++);
} else if (activeCount === 0) {
// 如果没有活跃请求,所有请求都完成了,解析Promise
resolve(results);
}
}
};
// 初始化请求,直到达到最大并发数
while (currentIndex < maxConcurrent && currentIndex < urls.length) {
console.log(`urls[${currentIndex + 1}]开始请求了...`);
executeRequest(urls[currentIndex], currentIndex++);
}
});
}
此函数首先初始化了一个结果数组、活跃请求计数器以及当前请求索引。然后定义了一个内部异步函数executeRequest
来执行单个请求。在executeRequest
中,每当一个请求完成(无论是成功还是失败),都会更新活跃请求计数,并检查是否有待处理的URL。如果有,则继续发起新的请求;如果没有待处理的URL并且活跃请求计数为0,则说明所有请求已经完成,这时可以解析Promise并将结果返回。
在主函数体中,通过while循环启动初始的一批请求,直至达到最大并发数限制或者urls数组遍历完毕。
模拟并发请求场景
const tasks = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14];
const p1 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p1-reject"));
const p2 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p2-resolve"));
const p3 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p3-reject"));
const p4 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p4-resolve"));
const p5 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p5-reject"));
const p6 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p6-resolve"));
const p7 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p7-reject"));
const p8 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p8-resolve"));
const p9 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p9-reject"));
const p10 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p10-resolve"));
const p11 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p11-reject"));
const p12 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p12-resolve"));
const p13 = () =>
new Promise((resolve, reject) => setTimeout(reject, 1000, "p13-reject"));
const p14 = () =>
new Promise((resolve, reject) => setTimeout(resolve, 1000, "p14-resolve"));
调用效果:⬇️
总结
这段代码提供了一个实用的并发请求控制解决方案
,通过Promise和async/await
机制实现了动态调度和执行异步请求
的功能。这种控制策略有助于避免资源浪费,提高系统稳定性,尤其适用于网络请求密集型的应用场景。
原文链接:https://juejin.cn/post/7343893453677297716 作者:前端小菜哇