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

學無先后,達者為師

網站首頁 編程語言 正文

2022年了--你還不會手寫promise? 完成promise的所有實現

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

手寫promise,將靜態方法和實例方法都進行了一遍實現。也可以實現鏈式調用。

/*
 * @Author: 毛毛 
 * @Date: 2022-01-03 10:17:47 
 * @Last Modified by:   毛毛 
 * @Last Modified time: 2022-01-03 10:17:47 
 */
/**
 *
 * 手寫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);
    }
  }
  /**
   * 靜態方法resolve,返回一個執行成功回調的promise對象
   *
   * @static
   * @param {*} value 執行成功回調resolve的參數
   * @return {MaoPromise} 
   * @memberof MaoPromise
   */
  static resolve(value) {
    return new MaoPromise((resolve) => resolve(value));
  }
  /**
   * 靜態方法reject 返回一個指向reject回調的promise對象
   *
   * @static
   * @param {*} reason 執行reject回調的參數
   * @return {MaoPromise} 
   * @memberof MaoPromise
   */
  static reject(reason) {
    return new MaoPromise((resolve, reject) => reject(reason));
  }
  /**
   *
   * 靜態方法 執行promise數組內的全部的promise,全都執行完 且都是成功執行回調 
   * 則執行 resolve回調,且參數為全部成功執行promise元素的回調函數resolve的參數的數組。一旦有一個promise元素執行了reject或者拋出異常,則終止執行且立刻執行reject回調
   * @static
   * @param {Array<MaoPromise>} promises 是一個promise數組
   * @return {*} 
   * @memberof MaoPromise
   */
  static all(promises) {
    return new MaoPromise((resolve, reject) => {
      const values = [];
      promises.forEach(promise => {
        promise.then(res => {
          values.push(res);
          if (values.length === promises?.length) resolve(values);
        }, err => reject(err));
      });
    });
  }
  /**
   *
   * allSettled 返回一個在所有給定的promise都已經fulfilled或rejected后的promise,并帶有一個對象數組,每個對象表示對應的promise結果。
   * @static
   * @param {Array<MaoPromise>} promises 是一個promise數組
   * @return {*} 
   * @memberof MaoPromise
   */
  static allSettled(promises) {
    return new MaoPromise((resolve) => {
      const result = [];
      promises.forEach(promise => {
        promise.then(res => {
          result.push({
            status: MaoPromise._PROMISE_STATUS_FULFILLED,
            value: res
          });
          if (result.length === promises?.length) resolve(result);
        }, err => {
          result.push({
            status: MaoPromise._PROMISE_STATUS_REJECTED,
            reason: err
          });
          if (result.length === promises?.length) resolve(result);
        });
      })
    });
  }
  /**
   *
   * promise數組的元素 有一個promise拿到了結果,無論是成功還是失敗,都直接結束
   * @static
   * @param {Array<MaoPromise>} promises  是一個promise數組
   * @memberof MaoPromise
   */
  static race(promises) {
    return new MaoPromise((resolve, reject) => {
      promises.forEach(promise => {
        promise.then(resolve, reject);
      });
    });
  }
  /**
   * 
   * 只要其中的一個 promise 成功,就返回那個已經成功的 promise 。
   * 如果可迭代對象中沒有一個 promise 成功(即所有的 promises 都失敗/拒絕),
   * 就返回一個失敗的 promise 和AggregateError類型的實例,
   * 它是 Error 的一個子類,用于把單一的錯誤集合在一起。
   * 本質上,這個方法和Promise.all()是相反的。
   * @static
   * @param {Array<MaoPromise>} promises  是一個promise數組
   * @return {*} 
   * @memberof MaoPromise
   */
  static any(promises) {
    return new MaoPromise((resolve, reject) => {
      const reasons = [];
      promises.forEach(promise => {
        promise.then(resolve, err => {
          reasons.push(err);
          if (reasons.length === promises?.length) reject(new AggregateError(reasons));
        });
      });
    });
  }

  /**
   * 成功時執行
   *
   * @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) {
    // 如果 onRejected函數沒有傳 想要在catch方法中傳回調
    // TODO  那么如果傳入了onRejected回調,又使用catch進行捕獲會如何?
    onRejected = onRejected ?? (err => { throw err });
    // 如果第一個then的resolve函數有返回值,且鏈式調用過程后面出現的是catch
    // 則成功回調函數是 undefined,也就是返回值不會被處理
    //  所以我們需要在調用catch的時候,將上一個resolve的結果返回出去
    // 如果不給 onFulfilled賦值,則catch后面鏈式調用里面的回調函數都不會執行
    onFulfilled = onFulfilled ?? (value => value);

    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);
        }
      } else { // pending 狀態
        // 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);
          });
      }
    });
  }
  /**
   * catch方法的設計 巧妙的用了then方法,
   * 但是考慮到我們可能會在catch方法后面,
   * 鏈式的調用finally方法,所以需要將調用的then方法的返回值 繼續返回
   *
   * @param {*} onRejected 失敗/異常處理回調
   * @memberof MaoPromise
   */
  catch(onRejected) {
    return this.then(undefined, onRejected);
  }
  /**
   * 最終執行promise的善后工作的代碼
   *
   * @param {*} onFinally 最終回調
   * @memberof MaoPromise
   */
  finally(onFinally) {
    // 還是借用then方法,不管成功還是失敗/異常 都會執行最終回調
    if (typeof onFinally === "function")
      this.then(() => {
        onFinally();
      }, () => {
        onFinally();
      });
  }
  /**
   * 執行副作用函數 進行異常的捕獲處理
   *
   * @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);
    }
  }

}


// MaoPromise.reject("err or").catch((err) => {
//   console.log(err);
// }).finally(() => {
//   console.log("finally");
// });

const p1 = new MaoPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(111);
  }, 1000);
});
const p2 = new MaoPromise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 2000);
});
const p3 = new MaoPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(333);
  }, 3000);
});

MaoPromise.any([p2]).then((res) => {
  console.log(res);
}).catch(err => {
  console.log(err.errors);
})

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

欄目分類
最近更新