解构Promise.all和Promise.race:从源码到原理

2023-12-16 06:43:35

Promise.all

Promise.all方法接受一个Promise对象数组作为参数，并返回一个新的Promise对象。这个新的Promise对象将在所有传入的Promise对象都成功resolve后resolve，或者任何一个传入的Promise对象reject后reject。

源码分析

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let pending = promises.length;

    for (let i = 0; i < promises.length; i++) {
      promises[i].then((result) => {
        results[i] = result;
        pending--;

        if (pending === 0) {
          resolve(results);
        }
      }).catch((error) => {
        reject(error);
      });
    }
  });
};

从源码中可以看出，Promise.all首先创建一个新的Promise对象，然后遍历传入的Promise对象数组，为每个Promise对象添加一个then回调函数。

then回调函数的作用是将Promise对象的状态和值传递给新的Promise对象。如果Promise对象成功resolve，则将结果存储在results数组中，并减少pending计数。如果Promise对象reject，则直接调用新的Promise对象的reject方法，并将错误信息传递给它。

当所有传入的Promise对象都成功resolve后，pending计数将变为0，此时新的Promise对象将调用resolve方法，并将results数组作为参数传递给它。

Promise.race

Promise.race方法也接受一个Promise对象数组作为参数，但它与Promise.all不同，它返回一个新的Promise对象，该对象将在第一个传入的Promise对象resolve或reject后resolve或reject。

源码分析

Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then((result) => {
        resolve(result);
      }).catch((error) => {
        reject(error);
      });
    }
  });
};

从源码中可以看出，Promise.race首先创建一个新的Promise对象，然后遍历传入的Promise对象数组，为每个Promise对象添加一个then回调函数。

then回调函数的作用是将Promise对象的状态和值传递给新的Promise对象。如果Promise对象成功resolve，则直接调用新的Promise对象的resolve方法，并将结果作为参数传递给它。如果Promise对象reject，则直接调用新的Promise对象的reject方法，并将错误信息传递给它。

当第一个传入的Promise对象resolve或reject后，新的Promise对象将停止等待其他Promise对象的状态变化，并立即调用resolve或reject方法。