自己实现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); // 任一失败立即终止
    });
  });
}
相关推荐
We་ct42 分钟前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
weixin_427771611 小时前
前端调试隐藏元素
前端
爱上好庆祝2 小时前
学习js的第五天
前端·css·学习·html·css3·js
C澒2 小时前
IntelliPro 产研协作平台:基于 AI Agent 的低代码智能化配置方案设计与实现
前端·低代码·ai编程
一袋米扛几楼982 小时前
【Git】规范化协作:详解 GitHub 工作流中的 Issue、Branch 与 Pull Request 最佳实践
前端·git·github·issue
网络点点滴3 小时前
前端与后端的区别与联系
前端
EnCi Zheng3 小时前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen3 小时前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技3 小时前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人3 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html