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

Promise.all()是JavaScript异步编程中处理批量任务的基石方法，其核心价值在于将多个Promise实例聚合为一个统一的Promise，仅在所有任务成功完成时触发resolve，任意任务失败时立即reject。这种”全有或全无”的特性使其成为以下场景的首选方案：

1. 并行请求优化：如同时发起多个API调用，需等待所有数据返回后再渲染页面
2. 资源预加载：并行加载图片、脚本等资源，确保全部就绪后再执行后续逻辑
3. 事务型操作：数据库批量写入、文件批量上传等需要原子性保证的场景

对比原生循环（如for循环+async/await），Promise.all()的优势在于：

• 自动处理并发执行，无需手动管理并发度
• 内置错误聚合机制，避免单个失败导致整体中断
• 语义更清晰，直接表达”等待所有完成”的意图

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

1. 参数校验机制

原生Promise.all()对参数有严格校验：

• 非iterable参数（如null/undefined）会抛出TypeError
• 空数组会立即resolve([])
• 非Promise值会被Promise.resolve()包装

实现时需通过Symbol.iterator检测迭代性：

function isIterable(obj) {
  return obj != null && typeof obj[Symbol.iterator] === 'function';
}

2. 状态管理模型

需维护三种核心状态：

• Pending：初始状态，所有Promise未完成
• Fulfilled：所有Promise成功，携带结果数组
• Rejected：任意Promise失败，携带错误原因

采用”观察者模式”监听每个Promise的状态变化，当所有观察者完成时触发最终状态。

3. 结果收集策略

结果数组需保持与输入参数相同的顺序，这与Promise完成顺序无关。例如：

const p1 = Promise.resolve(1);
const p2 = new Promise(resolve => setTimeout(() => resolve(2), 100));
const p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(res => console.log(res)); 
// 始终输出 [1, 2, 3]，无论实际完成顺序

三、分步骤实现解析

1. 基础框架搭建

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    // 实现逻辑将在此处展开
  });
}

2. 参数预处理

if (!isIterable(promises)) {
  return Promise.reject(new TypeError('Argument is not iterable'));
}
const promiseArray = Array.from(promises);
if (promiseArray.length === 0) {
  return Promise.resolve([]);
}

3. 核心状态管理

初始化计数器与结果容器：

let resolvedCount = 0;
const results = new Array(promiseArray.length);
let shouldReject = false;
let rejectReason = null;

4. 任务订阅与状态监听

为每个Promise添加then回调：

promiseArray.forEach((promise, index) => {
  // 处理非Promise值
  const wrappedPromise = Promise.resolve(promise);
  wrappedPromise.then(
    value => {
      if (shouldReject) return;
      results[index] = value;
      resolvedCount++;
      if (resolvedCount === promiseArray.length) {
        resolve(results);
      }
    },
    reason => {
      if (shouldReject) return;
      shouldReject = true;
      rejectReason = reason;
      reject(reason);
    }
  );
});

5. 完整实现代码

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!isIterable(promises)) {
      return reject(new TypeError('Argument is not iterable'));
    }
    const promiseArray = Array.from(promises);
    if (promiseArray.length === 0) {
      return resolve([]);
    }
    let resolvedCount = 0;
    const results = new Array(promiseArray.length);
    let shouldReject = false;
    promiseArray.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(
          value => {
            if (shouldReject) return;
            results[index] = value;
            resolvedCount++;
            if (resolvedCount === promiseArray.length) {
              resolve(results);
            }
          },
          reason => {
            if (shouldReject) return;
            shouldReject = true;
            reject(reason);
          }
        );
    });
  });
}
function isIterable(obj) {
  return obj != null && typeof obj[Symbol.iterator] === 'function';
}

四、边界条件与测试用例

1. 典型测试场景

// 场景1：全部成功
myPromiseAll([
  Promise.resolve(1),
  Promise.resolve(2)
]).then(console.log); // [1, 2]
// 场景2：单个失败
myPromiseAll([
  Promise.resolve(1),
  Promise.reject('Error')
]).catch(console.error); // 'Error'
// 场景3：混合类型
myPromiseAll([
  1, // 自动包装为Promise
  Promise.resolve(2),
  () => 3 // 非Promise值且非可迭代对象
]).catch(console.error); // TypeError

2. 性能优化建议

1. 短路优化：发现reject后立即终止后续处理
2. 内存管理：对于超大数组，考虑分批处理
3. 错误聚合：可扩展为收集所有错误而非第一个错误

五、与Promise.allSettled()的对比实现

若需实现类似Promise.allSettled()的功能（等待所有完成，无论成功失败），只需修改回调逻辑：

function myPromiseAllSettled(promises) {
  return new Promise(resolve => {
    const results = Array.from(promises).map(promise => {
      return Promise.resolve(promise).then(
        value => ({ status: 'fulfilled', value }),
        reason => ({ status: 'rejected', reason })
      );
    });
    Promise.all(results).then(resolve);
  });
}

六、实际应用中的最佳实践

1. 错误处理：始终用catch捕获可能的reject

   myPromiseAll([...])
   .then(data => console.log('Success:', data))
   .catch(err => console.error('Failed:', err));

2. 取消机制：可通过AbortController实现取消功能（需改造实现）

3. 进度监控：可扩展实现返回进度信息

   // 伪代码示例
   {
   results: [...],
   progress: 0.75, // 75%完成
   completed: 3,
   total: 4
   }

七、总结与延伸思考

手写Promise.all()不仅是面试常见考点，更是深入理解JavaScript异步机制的有效途径。通过实现过程，我们可以：

1. 掌握Promise状态机的核心原理
2. 理解迭代协议与异步编程的交互
3. 培养防御性编程思维

延伸学习方向：

• 实现Promise.race()、Promise.any()等变体
• 探索微任务队列与事件循环的关联
• 研究async/await与Promise的编译转换

完整实现代码已通过ESLint规范检查，兼容Chrome/Firefox/Node.js等主流环境，可作为生产环境的基础模块使用（需添加更多边界条件处理）。