前端Promise.all，并发控制怎么做？

深入解析前端开发中的 Promise.all 与并发控制策略

在现代化的前端开发领域，随着应用程序复杂度的不断提升，异步编程已成为开发者必须掌握的关键技能之一，JavaScript 中的 Promise 对象作为处理异步操作的标准方式，极大地改善了代码的可读性和可维护性，而 Promise.all 方法，作为 Promise 组合策略中的明星，允许开发者等待多个异步操作全部完成，或在其中任何一个操作失败时快速失败，在处理大量并发请求时，直接使用 Promise.all 可能会导致资源耗尽、性能下降甚至应用无响应等问题，合理控制并发数成为了一个不可忽视的挑战，本文将深入探讨如何在前端开发中有效利用 Promise.all 并实施并发控制策略，以实现高效、稳定的异步处理流程。

理解 Promise.all

Promise.all 是一个接收一个或多个 Promise 的数组作为参数的方法，返回一个新的 Promise，这个新 Promise 在所有传入的 Promise 都成功完成时才会完成，并且其结果是一个数组，包含了每个输入 Promise 的结果，如果任何一个输入 Promise 失败（reject），Promise.all 会立即以该失败的原因拒绝（reject），而不会等待其他 Promise 完成。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

并发控制的重要性

虽然 Promise.all 简化了多个异步操作的并行处理，但在实际应用中，尤其是当需要处理大量请求时,不加控制的并发执行可能导致以下问题：

资源竞争：过多的并发请求可能消耗大量内存和CPU资源,影响页面响应速度。
网络拥堵：前端应用可能因同时发起过多HTTP请求，导致网络拥堵,甚至触发浏览器的并发请求限制。
错误处理复杂度增加：当大量请求同时进行时,错误处理和重试逻辑变得更加复杂。

实施有效的并发控制策略，确保在任何时刻只有限定数量的请求处于活动状态,是提升应用性能和稳定性的关键。

实现并发控制的策略

使用 Promise.race 和队列管理

一种常见的并发控制策略是结合 Promise.race 和队列机制，基本思路是维护一个请求队列和一个正在执行请求的计数器，每当有新的请求加入队列时，如果当前并发数未达到上限，则立即执行；否则,等待直到有请求完成释放出位置。

function concurrentControl(tasks, limit) {
  const results = [];
  let currentIndex = 0;
  return new Promise((resolve) => {
    async function run() {
      if (currentIndex >= tasks.length) {
        // 所有任务已完成
        resolve(results);
        return;
      }
      // 获取当前可用的任务批次
      const currentTasks = [];
      for (let i = 0; i < Math.min(limit - currentRunning(假（或实际）设的“正在运行”计数逻辑）, (这里调整为实际逻辑，例如下面将用的) limit); i++, currentIndex++) { // （更正：此处应直接控制循环次数基于limit和剩余任务数）
        // 实际应基于一个外部变量追踪正在执行的请求数，此处简化示例
        // 更正实现思路：
        if (currentIndex >= tasks.length) break;
        currentTasks.push(tasks[currentIndex]);
        // ... 需引入外部计数器或使用其他方式追踪
      }
      // 更正后的简化示例，使用外部变量 trackingIndex 和 inFlightCount
      let inFlightCount = 0;
      let trackingIndex = 0;
      // ... 以下逻辑需重构，采用事件循环或递归调用方式管理
      // 由于直接在此示例中完整实现较为复杂，我们采用另一种更直观的方法
    }
    // 更正实现：采用递归和外部计数器
    let inFlight = 0;
    const executeNext = () => {
      if (trackingIndex(或改为currentIndex) >= tasks.length && inFlight === 0) {
        resolve(results);
        return;
      }
      while (inFlight < limit && currentIndex < tasks.length) {
        const taskIndex = currentIndex++;
        inFlight++;
        tasks[taskIndex]().then(result => {
          results[taskIndex] = result;
          inFlight--;
          executeNext(); // 递归调用以执行下一个任务
        }).catch(error => {
          // 错误处理逻辑
          inFlight--;
          executeNext();
        });
      }
    };
    executeNext();
    // 上述更正逻辑较为简化，实际可能需要更精细的控制，如任务取消等
  });
  // 更推荐的实现方式：使用async/await和队列结构，如下所述
}
// 更简洁且易于理解的实现方式：
async function concurrentControlV2(tasks, limit) {
  const results = new Array(tasks.length);
  let index = 0;
  const inFlight = new Set(); // 用于跟踪正在执行的任务索引
  async function runTask() {
    while (index < tasks.length) {
      const taskIndex = index++;
      const task = tasks[taskIndex];
      try {
        inFlight.add(taskIndex);
        const result = await task();
        results[taskIndex] = result;
      } catch (error) {
        // 错误处理
      } finally {
        inFlight.delete(taskIndex);
      }
      // 检查是否还有空闲槽位，但由外部while控制，此处无需额外操作
    }
  }
  // 启动不超过limit个runTask实例
  const runningTasks = [];
  for (let i = 0; i < limit; i++) {
    runningTasks.push(runTask());
  }
  await Promise.all(runningTasks); // 等待所有runTask实例完成
  return results;
}
// 注意：上述v2版本中，runTask内部通过while循环持续获取任务，直到无更多任务，且通过Promise.all等待所有runTask完成
// 但更优化的方式是使用一个队列和固定数量的worker函数，如下最终推荐实现

更推荐的实现（基于队列和固定数量worker）：

async function concurrentControlFinal(tasks, limit) {
  const results = [];
  const queue = [...tasks.keys()]; // 任务索引队列
  const workers = Array.from({ length: limit }, () => 
    (async function worker() {
      while (queue.length > 0) {
        const taskIndex = queue.shift();
        try {
          const result = await tasks[taskIndex]();
          results[taskIndex] = result;
        } catch (error) {
          // 错误处理，可记录或忽略
        }
      }
    })()
  );
  await Promise.all(workers);
  return results;
}

利用第三方库

对于追求开发效率和代码简洁性的团队，使用成熟的第三方库如 p-limit 或 async 库中的 parallelLimit 方法，可以轻松实现并发控制,而无需从头构建复杂的控制逻辑。

import pLimit from 'p-limit';
const limit = pLimit(3); // 并发数限制为3
const tasks = [/* 任务数组，每个元素为一个返回Promise的函数 */];
Promise.all(tasks.map(task => limit(() => task()))); // 通过limit包装每个任务
// 或者更简洁地，如果pLimit版本支持，可以直接使用limit.a(tasks)（取决于库的具体实现）
// 注意：pLimit的典型用法是直接调用limit函数包装异步函数调用，如上述map中的方式