Promise.all 手撕代码

2023-12-15 03:52:05

掌握Promise.all()的知识点，理解它如何工作，学习如何手撕 Promise.all()函数代码。手写Promise.all()，是一种很好的练习方法，有助于我们加深对Promise的理解，并为我们理解其他库或框架中的Promise实现奠定基础。

Promise.all 是什么？

Promise.all()是一个异步函数，它接受一个数组作为参数，该数组包含多个 Promise 对象。Promise.all() 等待所有传入的 Promise 对象全部完成（无论成功或失败），然后将结果作为单个 Promise 对象返回。

如果所有的 Promise 对象都成功完成，则返回的 Promise 对象的状态为已成功（resolved），其结果是一个数组，包含每个 Promise 对象返回的结果。

如果任何一个 Promise 对象失败，则返回的 Promise 对象的状态为已失败（rejected），其结果是第一个失败的 Promise 对象抛出的错误。

Promise.all() 的用法：

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
];

Promise.all(promises).then((results) => {
  console.log(results); // [1, 2, 3]
});

Promise.all() 注意事项：

Promise.all() 只接受 Promise 对象作为参数，因此如果传入的数组中包含非 Promise 对象，则会抛出一个 TypeError 错误。
Promise.all() 返回的 Promise 对象的状态取决于所有传入的 Promise 对象的状态，如果任何一个 Promise 对象失败，则返回的 Promise 对象的状态为已失败（rejected）。
Promise.all() 返回的 Promise 对象的结果是一个数组，包含每个 Promise 对象返回的结果。
Promise.all() 可以用于等待多个异步操作同时完成，然后再执行后续的操作。

手撕 Promise.all()

function promiseAll(promises) {
  // 检查参数是否合法
  if (!Array.isArray(promises)) {
    throw new TypeError('The argument passed to promiseAll must be an array');
  }

  // 存储Promise结果
  const results = [];

  // 存储Promise失败的第一个错误
  let error = null;

  // 存储已经完成的Promise的数量
  let completedCount = 0;

  // 存储Promise的数量
  const total = promises.length;

  // 返回一个Promise
  return new Promise((resolve, reject) => {
    // 遍历所有的Promise
    promises.forEach((promise, index) => {
      // 处理Promise
      promise.then(
        // 成功回调函数
        (value) => {
          // 将结果存储到results数组中
          results[index] = value;

          // 增加已经完成的Promise的数量
          completedCount++;

          // 如果所有的Promise都完成了，则返回结果
          if (completedCount === total) {
            resolve(results);
          }
        },
        // 失败回调函数
        (err) => {
          // 如果已经失败了，则忽略
          if (error) {
            return;
          }

          // 存储第一个失败的错误
          error = err;

          // 拒绝Promise
          reject(error);
        }
      );
    });
  });
}