日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

2022年了--你還不會手寫promise? --_-- promise的實現 第一版

作者:聽雨少年毛毛 更新時間: 2022-01-12 編程語言

有關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);
})


原文鏈接:https://blog.csdn.net/weixin_45747310/article/details/122276731

欄目分類
最近更新