小元
博客
详情文字在这里缓缓展开
静候你翻开这一页

手写一个Promise.all 方法

JS老生常谈的一个话题也是面试中出现较多的一个问题,手写一个Promise.all方法。

   思路:

      1. 封装一个.all的函数,函数需接收一个 可迭代 类型的参数(promises)。

       2. 将参数转换为数组,并返回一个"Promise"。

       3. 声明两个参数,一个用于存放执行成功响应结果的数组(result),一个用于统计执行成功的计数(count)。

       4. 循环遍历promises,判断每一项类型是否为Promise,不是的就手动转换一次。

       5. 对遍历的每一项执行.then方法,成功的取当前下标并把结果设置给result,每成功一次count+1,失败则直接返回调用reject。

       6. 最后判断count 与 promises 是否相等,相等则代表执行完成,调用resolve返回最终结果。


   代码:

const mayPromise = function () {};

// promises 是一个可迭代的参数
mayPromise.all = function (promises) {
  // 将参数转换为数组
  promises = Array.from(promises);

  return new Promise(function (resolve, reject) {
    // 存储结果
    const result = [];
    // 计数器,统计已完成的Promis数量
    let count = 0;

    if (promises.length === 0) {
      resolve(result)
      return;
    }

    promises.forEach(function (promise, index) {
      // 如果用户传递的值不是一个Promise,则转换为Promise
      if (!(promise instanceof Promise)) promise = Promise.resolve(promise);

      // 调用promise获取执行结果,成功的添加至result,一次失败则直接调用reject
      promise.then((res) => {
        // 注意这里不能使用push将结果直接添加至result里面,请求响应的时机不一致直接push会导致顺序和传入的不一致
        // 应使用下标确保顺序正确性
        result[index] = res;

        count++;
        if (count === promises.length) {
          // 全部完成时返回
          resolve(result);
        }
      }, reject);
    })
  })
}


渝ICP备2024031078号-1
本网站一切内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
如无意中侵犯了企业或个人的知识产权等,请及时通过电子邮件(1102905617@qq.com)告知我,本网站将会给予删除。
最新公告
😊访客你好,很高兴你的到来,本博客仍在建设中,还有些许功能尚在开发中,最后祝你在此能有所收获。
💥小元博客第三代自2025年9月上线以来,2026/08/09日迎来了它的第三次更新本次更新内容如下:
1. 文章详情页样式变更,由原来的弹窗改为单独的页面。
2. 使用Nuxt对项目进行了SEO优化,优化了搜索引擎的抓取和索引。
3. 对验签进行了优化,降低了请求被误触发拦截的概率。
4. 移动端也正在稳步推进中,在不久的将来会与大家见面。
5. 修复了首页黄历节日不显示的问题,以及其它bug的修复。