第十三篇 手写原理代码 - 实现 Promise

当使用 JavaScript 进行异步编程时，我们往往需要面对回调地狱（callback hell）、代码可读性低、错误处理困难等问题。为了解决这些问题，ECMAScript 6（ES6）中引入了 Promise。

Promise 是一种用于处理异步操作的对象，它是一个容器，保存着未来才会结束的事件（通常是一个异步操作），并提供了一组标准化的方法，允许开发者以同步的方式处理异步操作的结果。Promise 可以更好地组织和管理异步代码，使其更易于阅读和维护。

Promise 的最基本的概念就是将一个异步操作封装成一个 Promise 对象，该对象代表了这个异步操作在未来的某个时刻会返回一个值或者抛出一个错误。Promise 对象有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 对象处于 pending 状态时，可以继续等待异步操作完成，当异步操作成功完成时，Promise 对象进入 fulfilled 状态，并返回执行结果；当异步操作失败时，Promise 对象进入 rejected 状态，并返回错误信息。

使用 Promise 对象时，我们可以通过调用 then 方法来注册成功回调函数，调用 catch 方法来注册错误回调函数。如果 Promise 对象已经处于 fulfilled 或者 rejected 状态，那么回调函数会立即被执行；否则，回调函数会在 Promise 对象的状态改变后被执行

一个 Promise 对象有三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。同时还具有 then 方法，用于将 fulfilled 和 rejected 状态的结果返回给调用者

实现 Promise

class MyPromise {
  constructor(executor) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 保存 fulfilled 和 rejected 的结果
    this.value = null;
    this.reason = null;
    // 存储 fulfilled 和 rejected 的回调函数
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    // 执行 executor 函数
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (err) {
      this.reject(err);
    }
  }

  // 定义 resolve 和 reject 函数
  resolve(value) {
    if (this.status === 'pending') {
      this.status = 'fulfilled';
      this.value = value;
      // 执行所有的 fulfilled 回调函数
      this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
    }
  }

  reject(reason) {
    if (this.status === 'pending') {
      this.status = 'rejected';
      this.reason = reason;
      // 执行所有的 rejected 回调函数
      this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
    }
  }

  // 定义 then 方法
  then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是函数，就将其设置为默认回调函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    // 如果 onRejected 不是函数，就将其设置为默认回调函数
    onRejected =
      typeof onRejected === 'function'
        ? onRejected
        : (reason) => {
            throw reason;
          };

    // 存储回调函数
    if (this.status === 'pending') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    } else if (this.status === 'fulfilled') {
      onFulfilled(this.value);
    } else {
      onRejected(this.reason);
    }

    // 返回新的 Promise 对象
    return new MyPromise((resolve, reject) => {
      if (this.status === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const result = onFulfilled(this.value);
            this.resolvePromise(result, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const result = onRejected(this.reason);
            this.resolvePromise(result, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });
      } else if (this.status === 'fulfilled') {
        try {
          const result = onFulfilled(this.value);
          this.resolvePromise(result, resolve, reject);
        } catch (err) {
          reject(err);
        }
      } else {
        try {
          const result = onRejected(this.reason);
          this.resolvePromise(result, resolve, reject);
        } catch (err) {
          reject(err);
        }
      }
    });
  }

  // 解析 then 方法返回的值，如果是 Promise 对象就进行递归解析
  resolvePromise(result, resolve, reject) {
    if (result instanceof MyPromise) {
      result.then(resolve, reject);
    } else {
      resolve(result);
    }
  }
}