你不知道的前端并发请求控制最优实现

前言：笔者在校招面试中，被问到promise，让实现一到并发请求的题目，也是非常经典，在平时前端业务中，经常会遇到要处理的，今天我们一起来看下这道题目⬇️

分析

根据需求，我们需要设计一个能够动态管理并发请求的机制，确保同时运行的请求数量不会超过指定的最大值。当某个请求完成时，若还有待处理的请求，则立即从队列中取出下一个请求并开始执行。最终，当所有请求都完成后，将结果以数组形式返回给调用者。

题目：

实现一个并发请求控制

要求：实现一个函数，传入urls数组和最大并发数，当并发请求数大于最大并发数时，控制并发请求，当请求完成时，继续请求，直到所有请求完成,这里`要求并发只要有一个完成，此时请求排队队列里面还有请求的话，取出来加入到并发请求中`[重点]

ts 复制代码

/**
 * @urls urls数组
 * @maxConcurent 最大并发数
 * @returns 请求的结果数组
 */
function concurrentRequest(urls,maxConcurrent){
 // 代码实现逻辑
}

代码实现

ts 复制代码

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];

ts 复制代码

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机制实现了动态调度和执行异步请求的功能。这种控制策略有助于避免资源浪费，提高系统稳定性，尤其适用于网络请求密集型的应用场景。