一、Promise.all的核心价值与使用场景

在前端开发中，Promise.all是处理多个异步操作的核心工具。其典型应用场景包括：批量请求接口数据（如同时获取用户信息、订单列表、配置项）、并行执行多个I/O操作（文件读写、数据库查询）、依赖多个异步结果的复杂业务逻辑。相较于顺序执行的for…of循环，Promise.all通过并发机制将时间复杂度从O(n)优化至O(1)（不考虑资源限制时），显著提升性能。

以电商页面加载为例，假设需要同时请求商品详情、用户评价、促销活动三个接口。使用Promise.all可确保所有数据就绪后再渲染页面，避免部分数据缺失导致的界面闪烁。其返回值是一个新Promise，当所有输入Promise成功时，返回按顺序组合的结果数组；若任一Promise失败，则立即拒绝并传递第一个错误。

二、手写实现前的关键思考点

1. 参数验证机制

原生Promise.all对参数有严格校验：非可迭代对象（如null/undefined）会抛出TypeError，包含非Promise值时会被隐式转换为已解决的Promise。手写实现需复现这些行为：

function isIterable(obj) {
  return obj != null && typeof obj[Symbol.iterator] === 'function';
}
function myPromiseAll(iterable) {
  if (!isIterable(iterable)) {
    return Promise.reject(new TypeError('Argument is not iterable'));
  }
  // 后续实现...
}

2. 异步状态管理

需要维护三个核心状态：

• 待处理任务数（remaining）
• 结果收集数组（results）
• 错误处理标志（hasError）

采用计数器模式，每完成一个任务就减少remaining，当remaining归零且无错误时，触发resolve。

3. 执行顺序保证

即使输入Promise的完成顺序不确定，结果数组的顺序必须与输入顺序严格一致。这需要预先创建固定长度的数组，通过索引填充结果。

三、完整实现代码与详细注释

function myPromiseAll(promises) {
  // 参数校验
  if (!isIterable(promises)) {
    return Promise.reject(new TypeError('myPromiseAll: Argument is not iterable'));
  }
  const iterator = promises[Symbol.iterator]();
  const results = [];
  let index = 0;
  let remaining = 0;
  let hasError = false;
  // 第一次遍历：统计任务数并初始化数组
  const processPromise = (promise) => {
    const promiseIndex = index;
    index++;
    remaining++;
    // 处理非Promise值
    if (promise && typeof promise.then === 'function') {
      return promise.then(
        (value) => {
          if (!hasError) {
            results[promiseIndex] = value;
            remaining--;
            checkComplete();
          }
          return value; // 保持链式调用
        },
        (error) => {
          if (!hasError) {
            hasError = true;
            return Promise.reject(error); // 触发外部catch
          }
        }
      );
    } else {
      // 非Promise值处理
      const resolvedPromise = Promise.resolve(promise);
      return resolvedPromise.then((value) => {
        if (!hasError) {
          results[promiseIndex] = value;
          remaining--;
          checkComplete();
        }
        return value;
      });
    }
  };
  const checkComplete = () => {
    if (remaining === 0 && !hasError) {
      return Promise.resolve(results);
    }
  };
  // 主处理逻辑
  const promiseArray = [];
  let next = iterator.next();
  while (!next.done) {
    const item = next.value;
    promiseArray.push(processPromise(item));
    next = iterator.next();
  }
  return new Promise((resolve, reject) => {
    Promise.all(promiseArray)
      .then(() => {
        if (remaining === 0 && !hasError) {
          resolve(results);
        }
      })
      .catch(reject);
  });
}

代码优化说明

1. 迭代器处理：使用Symbol.iterator确保兼容所有可迭代对象
2. 索引跟踪：通过闭包保存每个Promise的原始位置
3. 错误隔离：一旦发生错误立即标记状态，避免后续操作
4. 非Promise兼容：自动将原始值包装为已解决的Promise

四、边界条件与测试用例

1. 异常场景测试

// 测试非可迭代参数
myPromiseAll(null).catch(e => 
  console.assert(e instanceof TypeError, '参数校验失败')
);
// 测试混合类型输入
myPromiseAll([
  Promise.resolve(1),
  2, // 非Promise值
  Promise.reject('error')
]).catch(e => 
  console.assert(e === 'error', '错误传递失败')
);

2. 性能对比测试

// 生成1000个Promise
const promises = Array.from({length: 1000}, (_,i) => 
  new Promise(resolve => setTimeout(() => resolve(i), Math.random()*100))
);
console.time('myPromiseAll');
myPromiseAll(promises).then(results => {
  console.assert(results.length === 1000, '结果数量不匹配');
  console.timeEnd('myPromiseAll');
});

五、实际应用中的优化建议

1. 取消机制扩展：可通过AbortController实现可取消的Promise.all
2. 进度监控：添加onProgress回调，实时报告完成比例
3. 超时控制：集成Promise.race实现整体超时
4. 内存优化：对于超大数组，采用分批处理策略

// 带超时的Promise.all示例
function myPromiseAllWithTimeout(promises, timeout) {
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), timeout)
  );
  return Promise.race([
    myPromiseAll(promises),
    timeoutPromise
  ]);
}

六、与原生实现的差异分析

1. 错误处理时机：原生实现会在第一个错误发生时立即拒绝，手写版本需确保相同行为
2. Symbol.species处理：高级实现可能需要考虑子类化场景
3. 堆栈跟踪优化：原生实现有更好的错误堆栈保留

七、总结与学习建议

手写Promise.all的过程实质是深入理解Promise规范的最佳实践。开发者应重点关注：

1. 迭代器协议的实现细节
2. 异步状态管理的最佳模式
3. 错误传播的边界条件

建议通过以下方式深化理解：

1. 阅读ECMAScript规范中Promise.all的算法步骤
2. 对比不同JavaScript引擎的实现差异
3. 尝试实现Promise.allSettled、Promise.race等衍生方法

掌握这些底层原理后，开发者在处理复杂异步场景时将更具优势，能够根据业务需求定制更高效的解决方案。