手写Promise.all()：从原理到实现的深度解析

在JavaScript异步编程中，Promise.all()是一个高频使用的工具方法，它能够将多个Promise实例包装成一个新的Promise，并在所有输入的Promise都成功时返回结果数组，或在任一Promise失败时立即返回第一个错误。虽然现代JavaScript环境已内置该方法，但通过手写实现不仅能加深对其工作原理的理解，还能在特定场景下（如定制化需求或环境限制）派上用场。本文将通过分步骤解析，带你实现一个功能完备的Promise.all()。

一、理解Promise.all()的核心行为

在动手实现之前，必须明确Promise.all()的三个关键行为：

1. 输入验证：接收一个可迭代对象（如数组），元素需为Promise或可转换为Promise的值（如原始值会自动包装为已解决的Promise）。
2. 并发执行：所有输入Promise应同时启动，而非顺序执行。
3. 结果聚合：成功时返回结果数组（顺序与输入一致），失败时立即拒绝并传递第一个错误。

示例说明

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = new Promise((resolve) => setTimeout(() => resolve(3), 100));
Promise.all([p1, p2, p3])
  .then((results) => console.log(results)); // 输出: [1, 2, 3]

二、手写实现的关键步骤

1. 基础框架搭建

首先，创建一个函数myPromiseAll，接收一个可迭代对象作为参数：

function myPromiseAll(iterable) {
  // 实现逻辑将在此填充
}

2. 处理输入参数

需要将输入转换为数组，并处理非Promise值：

function myPromiseAll(iterable) {
  const promises = Array.isArray(iterable) ? iterable : [...iterable];
  const resolvedPromises = [];
  let completedCount = 0;
  return new Promise((resolve, reject) => {
    // 后续逻辑将添加到这里
  });
}

3. 遍历与包装

对每个元素进行Promise化处理，并捕获结果或错误：

promises.forEach((promise, index) => {
  // 处理非Promise值（如数字、字符串）
  Promise.resolve(promise)
    .then((value) => {
      resolvedPromises[index] = value; // 保持原始顺序
      completedCount++;
      if (completedCount === promises.length) {
        resolve(resolvedPromises);
      }
    })
    .catch((error) => {
      reject(error); // 第一个错误立即触发拒绝
    });
});

4. 完整实现代码

整合上述逻辑，得到完整实现：

function myPromiseAll(iterable) {
  const promises = Array.isArray(iterable) ? iterable : [...iterable];
  const resolvedPromises = [];
  let completedCount = 0;
  return new Promise((resolve, reject) => {
    if (promises.length === 0) {
      resolve([]); // 空数组直接解决
      return;
    }
    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then((value) => {
          resolvedPromises[index] = value;
          completedCount++;
          if (completedCount === promises.length) {
            resolve(resolvedPromises);
          }
        })
        .catch(reject); // 错误直接传递
    });
  });
}

三、边界条件与优化

1. 空数组处理

原生Promise.all([])会立即解决为一个空数组，实现中已通过显式检查覆盖此场景。

2. 非可迭代对象输入

若传入非可迭代对象（如数字），[...iterable]会抛出错误。可添加类型检查：

if (!iterable || typeof iterable[Symbol.iterator] !== 'function') {
  return Promise.reject(new TypeError('Input is not iterable'));
}

3. 性能优化：提前终止

当前实现中，即使部分Promise已失败，其他Promise仍会继续执行。若需严格模拟原生行为（某些环境可能提前终止），需更复杂的控制逻辑，但通常不建议，因Promise规范不强制要求此行为。

四、测试用例验证

通过以下测试确保实现正确性：

1. 所有Promise成功

myPromiseAll([
  Promise.resolve(1),
  Promise.resolve(2),
]).then((results) => console.log(results)); // [1, 2]

2. 包含非Promise值

myPromiseAll([1, Promise.resolve(2), 'three'])
  .then((results) => console.log(results)); // [1, 2, 'three']

3. 包含失败Promise

myPromiseAll([
  Promise.resolve(1),
  Promise.reject('Error'),
]).catch((error) => console.log(error)); // 'Error'

4. 空数组

myPromiseAll([]).then((results) => console.log(results)); // []

五、实际应用场景

1. 批量API请求：并发发起多个HTTP请求，待全部完成后处理数据。
2. 资源加载：同时加载多个资源（如图片、脚本），全部就绪后初始化页面。
3. 自定义调度：在需要控制Promise执行顺序或添加日志的场景下，手写版本可灵活扩展。

六、与原生方法的对比

特性	原生Promise.all()	myPromiseAll()
并发执行	是	是
顺序保持	是	是（通过索引映射）
错误处理	立即拒绝	立即拒绝
空数组处理	立即解决	立即解决
非Promise值支持	自动包装	自动包装
提前终止其他Promise	依赖环境实现	通常不实现

七、总结与建议

通过手写Promise.all()，我们不仅掌握了其核心机制，还学会了如何处理异步聚合的复杂场景。在实际开发中：

1. 优先使用原生方法：除非有特殊需求，否则无需重复造轮子。
2. 考虑错误处理策略：根据业务需求决定是否需要收集所有错误而非第一个。
3. 性能敏感场景优化：对于超大量Promise，可考虑分批处理。

手写实现的价值在于深入理解Promise的并发模型，为解决更复杂的异步问题（如Promise.allSettled、Promise.race的变种）打下基础。掌握这一技能，将使你在异步编程领域更加游刃有余。