自己实现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); // 任一失败立即终止
    });
  });
}
相关推荐
香香甜甜的辣椒炒肉1 天前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
高级测试工程师欧阳1 天前
HTML 表格基础
前端
不买Huracan不改名1 天前
安装Codex(需要用npm)
前端·npm·node.js
Dorcas_FE1 天前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream1 天前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼1 天前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best6661 天前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东1 天前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生1 天前
微信小程序一键登录可行性方案
前端·微信小程序