promise原理手寫

class Promise {
  constructor(excutor) {
    // 設置promise 狀態(tài) 有 pending fulfilled rejected
    this.promiseState = "pending";
    // promise 返回的結(jié)果
    this.promiseResult = null;
    // 用于接收異步需要執(zhí)行的函數(shù)
    this.callbacks = [];
    const that = this;

    function resolve(data) {
      // 當狀態(tài)不是pending狀態(tài) 說明已經(jīng)改完狀態(tài),promise 只允許改變一次狀態(tài)
      if (that.promiseState !== "pending") return;
      that.promiseResult = data;
      // 執(zhí)行reslove函數(shù) 將promise狀態(tài)改為fulfilled
      that.promiseState = "fulfilled";

      for (let i = 0; i < that.callbacks.length; i++) {
        that.callbacks[i].OnResolved &&
          setTimeout(() => {
            that.callbacks[i].OnResolved(data);
          });
      }
    }
    function reject(data) {
      if (that.promiseState !== "pending") return;
      // 執(zhí)行reject函數(shù) 將promise狀態(tài)改為rejected
      that.promiseState = "rejected";
      that.promiseResult = data;

      for (let i = 0; i < that.callbacks.length; i++) {
        that.callbacks[i].OnRejected &&
          setTimeout(() => {
            that.callbacks[i].OnRejected(data);
          });
      }
    }
    // 當在執(zhí)行器函數(shù)里不調(diào)用resolve reject 使用throw new Error 或者代碼有錯誤 就需要使用try catch 進行捕獲錯誤
    try {
      excutor(resolve, reject);
    } catch (err) {
      // 捕獲到錯誤則使用reject進行錯誤處理
      reject(err.message);
    }
  }
  // then 方法 當狀態(tài)改變進行處理相對應狀態(tài)的回調(diào)函數(shù),then方法默認返回一個promise 當return undeined 或者其他值 then返回都是一個成功狀態(tài)的promise
  // 當回調(diào)函數(shù)里返回一個新的promise對象, 那么then 返回的就是這個promise對象的狀態(tài)的promise
  then(OnResolved = (value) => value, OnRejected = null) {
    const self = this;
    // 當then沒有傳第二個參數(shù),此時如果有錯的話就無法傳遞錯誤,使其異常穿透
    if (typeof OnRejected !== "function") {
      OnRejected = function (reason) {
        throw reason;
      };
    }
    // then 返回的都是一個promise對象 所以首先返回一個promise
    return new Promise((resolve, reject) => {
      // 封裝函數(shù)
      function callback(type) {
        try {
          // 先執(zhí)行 傳入的函數(shù)看是否是promise promise的話狀態(tài)就是then的狀態(tài),不行promise直接resolve(result)
          let result = type(self.promiseResult);
          result instanceof Promise
            ? result.then(
                (v) => {
                  resolve(result);
                },
                (r) => {
                  reject(result);
                }
              )
            : resolve(result);
        } catch (e) {
          reject(e);
        }
      }
      // 當執(zhí)行到then的時候,promise狀態(tài)還是pending,證明是沒有調(diào)用resolve或reject 或 拋出錯誤,極大可能是進行異步操作
      if (this.promiseState === "pending") {
        // 異步操作需要將then方法里的回調(diào)函數(shù)收集起來,等之前異步結(jié)束,調(diào)用resolve等方法時調(diào)用這些回調(diào)函數(shù)
        // 避免將之前的回調(diào)函數(shù)覆蓋,采用數(shù)組追加的方式進行添加
        this.callbacks.push({
          OnResolved: function () {
            callback(OnResolved);
          },
          OnRejected: function () {
            callback(OnRejected);
          },
        });
      } else {
        // 不是pending狀態(tài)
        this.promiseState === "fulfilled"
          ? setTimeout(() => {
              callback(OnResolved);
            })
          : setTimeout(() => {
              callback(OnRejected);
            });
      }
    });
  }
  catch(OnRejected) {
    // console.log(this.then);
    return this.then(undefined, OnRejected);
  }
  static resolve(value) {
    return new Promise((resolve, reject) => {
      value instanceof Promise
        ? value.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          )
        : resolve(value);
    });
  }
  static reject(value) {
    return new Promise((resolve, reject) => {
      reject(value);
    });
  }

  static all(promise) {
    let count = 0;
    let result = [];
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            count++;
            result[i] = v;
            if (count === promise.length) {
              resolve(result);
            }
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }

  static race(promise) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promise.length; i++) {
        promise[i].then(
          (v) => {
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      }
    });
  }
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容