让Promise不在陌生，现在就来尝试手写一个Promise(all,race)

前端

2023-10-18 20:02:29

前言

在理解了手写Promise.then的方法后，再来看它的其他方法，感觉真的简单了不少。

Promise.all

介绍

Promise.all()方法用于将多个Promise实例，包装成一个新的Promise实例。这个新的Promise实例的状态，由这几个Promise实例的状态决定。

如果这几个Promise实例都成功resolve，则新的Promise实例也会resolve，并返回一个由这些Promise实例的resolve值组成的数组。

如果这几个Promise实例中有一个失败reject，则新的Promise实例也会reject，并返回这个失败的Promise实例的reject值。

实现原理

Promise.all = function (promises) {
  // 返回一个新的Promise实例
  return new Promise((resolve, reject) => {
    // 记录成功resolve的Promise的数量
    let resolvedCount = 0;
    // 记录所有Promise的resolve值
    let resolvedValues = [];
    // 遍历所有的Promise实例
    for (let i = 0; i < promises.length; i++) {
      // 将每个Promise实例的resolve值添加到resolvedValues数组中
      promises[i].then(
        (value) => {
          resolvedCount++;
          resolvedValues[i] = value;
          // 如果所有的Promise实例都成功resolve，则resolve新的Promise实例
          if (resolvedCount === promises.length) {
            resolve(resolvedValues);
          }
        },
        // 如果有一个Promise实例失败reject，则reject新的Promise实例
        (reason) => {
          reject(reason);
        }
      );
    }
  });
};

Promise.race

介绍

Promise.race()方法用于将多个Promise实例，包装成一个新的Promise实例。这个新的Promise实例的状态，由这几个Promise实例中第一个成功或失败的Promise实例决定。

如果这几个Promise实例中有一个成功resolve，则新的Promise实例也会resolve，并返回这个成功resolve的Promise实例的resolve值。

如果这几个Promise实例中有一个失败reject，则新的Promise实例也会reject，并返回这个失败reject的Promise实例的reject值。

实现原理

Promise.race = function (promises) {
  // 返回一个新的Promise实例
  return new Promise((resolve, reject) => {
    // 遍历所有的Promise实例
    for (let i = 0; i < promises.length; i++) {
      // 将每个Promise实例的resolve值添加到resolvedValues数组中
      promises[i].then(
        (value) => {
          // 如果有一个Promise实例成功resolve，则resolve新的Promise实例
          resolve(value);
        },
        // 如果有一个Promise实例失败reject，则reject新的Promise实例
        (reason) => {
          reject(reason);
        }
      );
    }
  });
};