一篇文章带你手写Promise 以及 all 和 race

手写Promise

一、声明Promise类，并进行初始化

class MyPromise {
  constructor(callback) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 初始化成功状态的值
    this.value = undefined;
    // 初始化失败状态的值
    this.reason = undefined;

    // 定义 resolve 函数
    const resolve = value => {
      if (this.status === 'pending') {
        // 更新状态为 resolved
        this.status = 'resolved';
        // 存储成功状态的值
        this.value = value;
      }
    };

    // 定义 reject 函数
    const reject = reason => {
      if (this.status === 'pending') {
        // 更新状态为 rejected
        this.status = 'rejected';
        // 存储失败状态的值
        this.reason = reason;
      }
    };

    // 调用回调函数，将 resolve 和 reject 传递给它
    callback(resolve, reject);
  }
}

二、then

接下来定义Promsie类中then函数。

• 首先创建一个Promise对象，根据Promise的状态来执行不同的回调函数。then 函数接收两个参数，一个onResolved（Promise 的状态为成功时候调用），一个onRejected（Promise 的状态为失败时候调用）。
• then函数返回一个新的Promsie对象，它的值取决于回调函数的返回值。
• 如果当前状态是pending，需要将onResolved，onRejected回调保存起来，等异步结束之后再执行。

class MyPromise {
 then(onResolved, onRejected) {
    // 创建一个新的 Promise 对象
    const newPromise = new MyPromise((resolve, reject) => {
      // 如果当前 Promise 的状态为 resolved
      if (this.status === 'resolved') {
        try {
          // 执行 onResolved 回调函数
          const x = onResolved(this.value);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 rejected
      if (this.status === 'rejected') {
        try {
          // 执行 onRejected 回调函数
          const x = onRejected(this.reason);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 pending
      if (this.status === 'pending') {
        // 将 onResolved 和 onRejected 保存起来
        // 等待异步操作完成后再执行
        this.onResolvedCallbacks.push(() => {
          try {
            const x = onResolved(this.value);
            resolve(x);
          } catch (error) {
            reject(error);
                });

    this.onRejectedCallbacks.push(() => {
      try {
        const x = onRejected(this.reason);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });
  }
});
// 返回新的 Promise 对象
return newPromise;
}

三、catch方法

catch实际上是then方法的语法糖。

class MyPromise {
  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

完整代码

class MyPromise {
  constructor(callback) {
    // 初始化状态为pending
    this.status = "pending";
    // 初始化值为空字符串
    this.value = "";
    // 初始化原因为空字符串
    this.reason = "";
    // 存储成功状态的回调函数数组
    this.onResolvedCallbacks = [];
    // 存储失败状态的回调函数数组
    this.onRejectedCallbacks = [];
    
    // 定义resolve函数，用于将状态从pending变为resolved
    const resolve = (value) => {
      if (this.status == "pending") {
        this.status = "resolved";
        this.value = value;
        // 执行所有成功状态的回调函数
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    };
    // 定义reject函数，用于将状态从pending变为rejected
    const reject = (reason) => {
      if (this.status == "pending") {
        this.status = "rejected";
        this.reason = reason;
        // 执行所有失败状态的回调函数
        this.onRejectedCallbacks.forEach((fn) => fn());
      }
    };
    try {
      // 调用传入的回调函数，并传入resolve和reject函数
      callback(resolve, reject);
    } catch (error) {
      // 如果回调函数抛出异常，则调用reject函数
      reject(error);
    }
  }

  then(onResolved, onRejected) {
    // 如果onResolved是函数，则直接使用，否则默认为返回值不变的函数
    onResolved =
      typeof onResolved === "function" ? onResolved : (value) => value;
    // 如果onRejected是函数，则直接使用，否则默认为抛出异常的函数
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
    // 创建一个新的Promise对象
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status == "resolved") {
        try {
          // 如果当前状态为resolved，则调用onResolved函数处理值
          const x = onResolved(this.value);
          resolve(x);
        } catch (error) {
          // 如果onResolved函数抛出异常，则调用reject函数
          reject(error);
        }
      }
      if (this.status == "rejected") {
        try {
          // 如果当前状态为rejected，则调用onRejected函数处理原因
          const x = onRejected(this.reason);
          resolve(x);
        } catch (error) {
          // 如果onRejected函数抛出异常，则调用reject函数
          reject(error);
        }
      }
      if (this.status == "pending") {
        // 如果当前状态为pending，则将回调函数添加到对应的数组中
        this.onResolvedCallbacks.push(() => {
          if (this.status == "resolved") {
            try {
              // 如果当前状态变为resolved，则调用onResolved函数处理值
              const x = onResolved(this.value);
              resolve(x);
            } catch (error) {
              // 如果onResolved函数抛出异常，则调用reject函数
              reject(error);
            }
          }
        });
        this.onRejectedCallbacks.push(() => {
          if (this.status == "rejected") {
            try {
              // 如果当前状态变为rejected，则调用onRejected函数处理原因
              const x = onRejected(this.reason);
              resolve(x);
            } catch (error) {
              // 如果onRejected函数抛出异常，则调用reject函数
              reject(error);
            }
          }
        });
      } else {
        // 执行完所有回调函数之后，清空回调数组
        this.onResolvedCallbacks = [];
        this.onRejectedCallbacks = [];
      }
    });
    // 返回新的Promise对象
    return promise2;
  }
  catch(onRejected) {
    // 等同于then(null, onRejected)
    return this.then(null, onRejected);
  }
}

手写promise.all

思路

1. 接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数
2. 这个方法返回一个新的 promise 对象，
3. 遍历传入的参数，用Promise.resolve()将参数"包一层"，使其变成一个promise对象
4. 参数所有回调成功才是成功，返回值数组与参数顺序一致
5. 参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。

  /**
   * 将多个Promise对象合并为一个新的Promise对象
   * @param {Array} promises - 包含多个Promise对象的数组
   * @returns {MyPromise} - 合并后的Promise对象
   */
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      let resolvedCount = 0;
      const values = new Array(promises.length);
      for (let i = 0; i < promises.length; i++) {
        if (!MyPromise.isPromise(promises[i])) {
          reject(new TypeError("Expected a Promise"));
          break;
        }

        // 处理每个Promise
        promises[i].then(
          (value) => {
            resolvedCount++;
            values[i] = value;

            // 当所有Promise都成功时，resolve结果数组
            if (resolvedCount === promises.length) {
              resolve(values);
            }
          },
          (reason) => {
            // 只要有一个Promise失败，就reject整个Promise.all的结果
            reject(reason);
          }
        );
      }
    });
  }

  /**
   * 判断是否为Promise对象
   * @param {*} value - 待判断的对象
   * @returns {boolean} - 是否为Promise对象
   */
  static isPromise(value) {
    return (
      value instanceof MyPromise ||
      (typeof value === "object" &&
        value !== null &&
        typeof value.then === "function")
    );
  }

手写promise.race

该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行.

因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.

  /**
   * 执行一组Promise中的第一个完成（resolve或reject）的Promise
   * @param {Array} promises - Promise对象数组
   * @returns {MyPromise} - 新的Promise实例
   */
  static race(promises) {
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        if (!MyPromise.isPromise(promises[i])) {
          reject(new TypeError("Expected a Promise"));
          break;
        }

        // 当任何一个Promise resolve或reject时，立即结束新Promise的状态
        promises[i].then(
          (value) => {
            resolve(value);
          },
          (reason) => {
            reject(reason);
          }
        );
      }
    });
  }

结尾

如果你觉得此文对你有帮助的话，点个赞，鼓励一下作者。假如您也和我一样，在准备春招。欢迎加我微信shunwuyu ，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"