自己实现Promise.all

1. 核心思路

以下是该promiseAll实现的核心思路梳理,采用分步式解析:

1.1 初始化阶段

  • 创建容器 :const result = []
    预分配结果数组,用于存储每个Promise的解析值。
  • 计数器 :let completedCount = 0
    必须用let声明,用于统计已完成的Promise数量(原代码const会导致无法递增)。

1.2. 边界处理

  • 空数组检测 :

    javascript 复制代码
    if (apis.length === 0) {
      resolve(result);
      return; // 立即终止执行
    }

    若输入为空数组,直接同步返回空结果数组(与原生Promise.all行为一致)。

1.3. 遍历处理每个Promise

  • 统一包装 :Promise.resolve(api)
    通过Promise.resolve强制将非Promise值(如数字、普通对象)转换为Promise,统一处理逻辑。

  • 索引存储 :result[index] = res
    按原始顺序存储结果(原代码push会导致结果顺序与输入顺序不一致)。

  • 完成计数 :

    javascript 复制代码
    completedCount++;
    if (completedCount === apis.length) {
      resolve(result);
    }

    只有当完成数等于总Promise数时,才触发整体resolve。

1.4. 错误处理

  • 短路机制 :.catch(reject)
    任一Promise失败时立即调用reject,中断后续处理(符合Promise.all的快速失败特性)。

2. 最终代码

js 复制代码
/**
 * 自定义实现Promise.all功能
 * @param {Array} apis - Promise对象数组(支持非Promise值)
 * @returns {Promise} 返回新Promise,全部成功时resolve结果数组,任一失败立即reject
 */
function promiseAll(apis = []) {
  return new Promise((resolve, reject) => {
    const result = [];
    let completedCount = 0; // 必须用let声明(原代码const会导致无法递增)

    // 空数组直接resolve
    if (apis.length === 0) {
      resolve(result);
      return; // 需立即返回避免继续执行
    }

    apis.forEach((api, index) => {
      // 用Promise.resolve包裹确保处理非Promise值
      Promise.resolve(api)
        .then((res) => {
          // 按原始顺序存储结果(原代码用push会导致顺序错乱)
          result[index] = res;
          completedCount++;
          
          // 全部完成时才resolve(原代码条件错误:count === result.length)
          if (completedCount === apis.length) {
            resolve(result);
          }
        })
        .catch(reject); // 任一失败立即终止
    });
  });
}
相关推荐
智能直播4 小时前
RK3518:1.5G 内存 + 8G 存储,如何跑起硬件编解码、Web、AI 识别、绿幕特效
前端·人工智能·5g
掘金酱5 小时前
【10.24 特别活动】AI 时代,程序员的新饭碗在哪里?
前端·人工智能·后端
excel5 小时前
多进程环境下使用 PM2 部署 Socket.IO:需要注意什么
前端
IT_陈寒5 小时前
Redis的原子性竟然失效了?记一次分布式锁翻车实录
前端·人工智能·后端
时间的情敌7 小时前
《回顾 2018 前端:Vue2 成熟期,Webpack4 发布,PWA 大火》
前端
Java后端的Ai之路7 小时前
前端技术Vue-09-webpack-vuejs-实战
前端·vue.js·webpack
LMT流氓兔8 小时前
第五单元——第4课:给工具参数加校验
java·前端·算法·ai·langchain
涛涛ing8 小时前
React Compiler正式“Rust化”:你项目里的Babel插件,正在被编译进打包器
前端
迷迭绿8 小时前
Cesium 轨迹回放播放器
前端·javascript·cesium
HolySaga8 小时前
我用 UTS 写了一个三端同构的蓝牙插件(Android / iOS / 鸿蒙 NEXT),把踩过的坑都讲给你听
前端