2022年了--你还不会手写promise? --_-- promise的实现 第一版

有关promise的实现，首先需要了解promise是如何使用的，需要对promise的调用关系很熟悉。
第一版，实现了then方法，以及resolve，reject等，关于promise 内部状态的改变，抛出异常后的处理，以及链式调用then方法的处理方式。

/*
 * @Author: 毛毛 
 * @Date: 2022-01-02 15:00:12 
 * @Last Modified by: 毛毛
 * @Last Modified time: 2022-01-02 15:09:44
 */

/**
 *
 * 手写promise
 * @class MaoPromise
 */
class MaoPromise {
  /**
   * 正在执行的状态
   *
   * @static
   * @memberof MaoPromise
   */
  static _PROMISE_STATUS_PENDING = "pending";
  /**
   * 成功执行的状态
   *
   * @static
   * @memberof MaoPromise
   */
  static _PROMISE_STATUS_FULFILLED = "fulfilled";
  /**
   * 失败执行的状态
   *
   * @static
   * @memberof MaoPromise
   */
  static _PROMISE_STATUS_REJECTED = "rejected";
  /**
   * 默认的状态 执行中
   *
   * @memberof MaoPromise
   */
  _status = MaoPromise._PROMISE_STATUS_PENDING;
  /**
   * 成功执行时 传给 resolve函数的参数
   *
   * @memberof MaoPromise
   */
  _value = undefined;
  /**
   * 失败执行时 传给 reject函数的参数
   *
   * @memberof MaoPromise
   */
  _reason = undefined;
  /**
   * 成功执行的回调函数
   *
   * @memberof MaoPromise
   */
  _onFulfilledCallback = [];
  /**
   * 失败执行的回调函数
   *
   * @memberof MaoPromise
   */
  _onRejectedCallback = [];

  /**
   * Creates an instance of MaoPromise.
   * @param {Function} executor 执行器
   * @memberof MaoPromise
   */
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (err) {
      this.reject(err);
    }
  }

  /**
   * 成功时执行
   *
   * @param {*} value
   * @memberof MaoPromise
   */
  resolve = (value) => {
    if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
      // 延迟执行  queueMicrotask函数 将回调函数的内容加入到微任务中执行
      queueMicrotask(() => {
        if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
        this._value = value;
        this._status = MaoPromise._PROMISE_STATUS_FULFILLED;

        // 执行成功回调
        this._onFulfilledCallback.forEach(callback => {
          callback(this._value);
        });
      });
    }
  }
  /**
   * 失败时执行
   *
   * @param {*} reason
   * @memberof MaoPromise
   */
  reject = (reason) => {
    if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
      queueMicrotask(() => {
        if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
        this._reason = reason;
        this._status = MaoPromise._PROMISE_STATUS_REJECTED;

        // 执行失败回调
        this._onRejectedCallback.forEach(callback => {
          callback(this._reason);
        });
      });
    }
  }
  /**
   * then方法
   *
   * @param {*} onFulfilled 成功回调
   * @param {*} onRejected 失败回调
   * @memberof MaoPromise
   */
  then(onFulfilled, onRejected) {
    return new MaoPromise((resolve, reject) => {
      // TODO 执行then函数的时候，状态已经确定了，则直接执行成功回调函数
      if (this._status === MaoPromise._PROMISE_STATUS_FULFILLED) {
        if (typeof onFulfilled === "function") {
          this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
        }
      }
      else if (this._status === MaoPromise._PROMISE_STATUS_REJECTED) {
        if (typeof onRejected === "function") {
          this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
        }
      }
      // TODO  副作用函数的返回值 作为then函数返回值promise的(resolve,reject)的参数
      // 状态还没确定之前 搜集副作用 在状态改变之后 一起执行
      if (typeof onFulfilled === "function")
        // 为了收集到副作用执行后的返回值 我们将副作用函数放到新的函数中 然后加入到副作用数组中
        this._onFulfilledCallback.push(() => {
          this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
        });
      if (typeof onRejected === "function")
        this._onRejectedCallback.push(() => {
          this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
        });
    });
  }
  /**
   * 执行副作用函数 进行异常的捕获处理
   *
   * @param {*} execFn 副作用函数
   * @param {*} value 上一个回调函数(resolve,reject)执行时传入的参数
   * @param {*} resolve 成功回调
   * @param {*} reject 失败回调
   * @memberof MaoPromise
   */
  _executorFunctionWithCatchError(execFn, value, resolve, reject) {
    try {
      const res = execFn(value);
      resolve(res);
    } catch (err) {
      reject(err);
    }
  }

}

const promise = new MaoPromise((resolve, reject) => {
  resolve("111");
  // resolve("1121");
  // throw new Error("222");
});

promise.then((res) => {
  console.log(res);
  return "asa";
}, err => {
  console.log(err.message);
}).then(res => {
  console.log(res);
})