一对一拆解 Promise.all，手动串联 Promise

2023-12-15 08:15:10

理解 Promise.all

Promise.all 方法接收一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。该新的 Promise 对象在数组中所有 Promise 都成功时才会成功，只要数组中有一个 Promise 失败，新的 Promise 对象就会失败。

Promise.all 的基本原理是：

创建一个新的 Promise 对象。
遍历 Promise 对象数组，并为每个 Promise 对象添加一个状态监听器。
当某个 Promise 对象成功时，将该 Promise 对象从 Promise 对象数组中移除，并检查是否所有 Promise 对象都已成功。
如果所有 Promise 对象都已成功，则新的 Promise 对象成功。
如果数组中任何一个 Promise 对象失败，则新的 Promise 对象失败。

手动实现 Promise.all

下面我们将演示如何手动实现 Promise.all 方法：

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (promises.length === 0) {
      resolve([]);
      return;
    }

    let completedCount = 0;
    const results = [];

    promises.forEach((promise, index) => {
      promise.then(
        (value) => {
          completedCount++;
          results[index] = value;
          if (completedCount === promises.length) {
            resolve(results);
          }
        },
        (error) => {
          reject(error);
        }
      );
    });
  });
}

这个函数接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。该新的 Promise 对象在数组中所有 Promise 都成功时才会成功，只要数组中有一个 Promise 失败，新的 Promise 对象就会失败。

使用手动实现的 Promise.all

我们可以使用手动实现的 Promise.all 方法来等待多个 Promise 对象的完成，例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

myPromiseAll([promise1, promise2, promise3]).then((results) => {
  console.log(results); // [1, 2, 3]
});