自主实现 Promise.all

自主实现 Promise.all

源码

// const p = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((it) => Promise.resolve(it));
const p = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  .reverse()
  .map(
    (it) =>
      new Promise((resolve, reject) => setTimeout(() => resolve(it), it * 1000))
  );
/**
 * @description 实现Promise.all的函数
 * @param {Promise<T>[]} array
 * @returns Promise<T[]>
 */
function promiseAll(array) {
  return new Promise((resolve, reject) => {
    // 存放结果的数组
    const results = [];
    // 计数解决的Promise个数
    let resolveCount = 0;
    // 需要解决的Promise数组的长度（个数）
    const length = array.length;

    array.forEach((it, i) => {
      it.then(
        (value) => {
          results[i] = value;
          // 更正，不可以通过索引的方式来判断是否已经全部解决，
          // 因为异步函数的回调顺序并不与索引顺序一致
          // if (i === length - 1) {
          //   resolve(results);
          // }

          // 拿到值，就说明解决了一个Promise，计数自增
          resolveCount++;
          // 如果解决的Promise个数与传入数组长度一致则说明全部解决了，这时候就可以进行裁决了
          if (resolveCount === length) {
            resolve(results);
          }
        },
        (error) => {
          reject(error);
        }
      );
    });
  });
}
promiseAll(p).then((values) => {
  // console.log(values); //1,2,3,4,......
  console.log(values); //10,9,8,7,6,......
});

分析

• 为什么要进行倒序？这样可以彻底的暴露出采用索引的方式判断是否可以裁决的这一方案的巨大弊端！
• 实现函数的参数是一个 Promise 数组，为了保证返回数据的顺序与输入一致，所以我引入了索引。
• 需要特别注意判断结束的位置，是在 then 回调取得值时，这个特别重要。

如果看不懂，建议温习一下 JavaScript 的词法作用域，闭包的概念。

附弊端结果：

测试环境：nodejs（v12.16.1）