現在Promise用的比較頻繁了，如果哪天突然不用了，可能邏輯就不好釐清了，回撥沒的說是一大把

廢話不多說，進入正題

Promise這個東西很神奇，用起來舒服，若自己寫一下，恐怕還真不簡單，關鍵就一個字“繞”，繞過了也就好了

豌豆資源搜尋網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com

首先定義結構

class MyPromise {
    constructor(excutor) {}
    then(onfulfilled, onrejected) {}
    catch(onrejected) {}
}

以上也就是大體的結構了

結構清楚了，那麼說如何設計呢，先看看Promise的示例

var p = new Promise((resolve, reject) => {
    resolve(1)
})
p.then(console.log)
p.then(console.log)

以上的輸出結果為

1
1

所以說內部應該有必要存這個結果值，同時還有必要存一系列的回撥函式，所以先來看看建構函式的實現

建構函式

constructor(excutor) {
    // 狀態
    this._state = 'pending'
    // 成功回撥
    this._callbacks_resolved = []
    // 失敗回撥
    this._callbacks_rejected = []
    // 執行
    excutor((data) => {
        // 避免重複執行
        if (this._state !== 'pending') {
            return
        }
        // 儲存結果
        this._data = data
        // 狀態變更
        this._state = "resolved"
        // 處理
        this._handle()
    }, (err) => {
        if (this._state !== 'pending') {
            return
        }
        // 錯誤資訊
        this._err = err
        // 狀態變更
        this._state = "rejected"
        this._handle()
    })
}
 

看看處理函式

也就是根據對應的狀態執行對應的回撥，當然不要忘了處理完之後要清空

_handle() {
    if (this._state === 'pending') {
        return;
    }
    // 為什麼要延時，then的東西是不能馬上執行的，可以看看micro-task和macro-task，這裡只能模擬
    setTimeout(() => {
        if (this._state === 'resolved') {
            this._callbacks_resolved.forEach(cb => cb(this._data))
        } else {
            this._callbacks_rejected.forEach(cb => cb(this._err))
        }
        this._callbacks_resolved = []
        this._callbacks_rejected = []
    })
}
 

then

到了關鍵的一步，也就是核心的then
這個then的放回結果本身就是一個Promise，所以是可以無限的套的，也就像這樣.then().then()
還支援值傳遞，上一個沒有處理的，直接流到下一級，上一級把錯誤處理後，下一級狀態變更為resolved

最開始想直接返回this，發覺這樣問題大了去了，所以得另外new一個MyPromise例項，程式碼如下

then(onfulfilled, onrejected) {
    return new MyPromise((resolve, reject) => {
        this._callbacks_resolved.push(data => {
            // 沒有處理，直接往後傳
            if (!onfulfilled) {
                return resolve(data)
            }
            try {
                let r = onfulfilled(data)
                // 有then函式，就認為是Promise
                if (r && typeof r.then === "function") {
                    return r.then(resolve, reject)
                }
                resolve(r)
            } catch(e) {
                // 有錯誤直接向後傳
                reject(e)
            }
        })
        this._callbacks_rejected.push(err => {
            if (!onrejected) {
                return reject(err)
            }
            try {
                let r = onrejected(err)
                if (r && typeof r.then === "function") {
                    return r.then(resolve, reject)
                }
                resolve(r)
            } catch(e) {
                reject(e)
            }
        })
        this._handle()
    })
}

以上基本功能已經實現完成，最後還有一個catch函式，很簡單，包裝一下就好了

catch(onrejected) {
    return this.then(undefined, onrejected)
}

隨便寫了個測試用例

var p = new MyPromise((resolve, reject) => {
  resolve(1);
})
  .then((n) => {
    console.log(n);
    return new MyPromise((resolve, reject) => {
      resolve(2);
    });
  })
  .then(console.log)
  .then(() => {
    throw new Error("error");
  });

p.catch((e) => {
  console.error(e);
});

p.catch((e) => {
  console.error(e);
});

輸出

1
2
error
error

完全符合預期

好了，完結

附上全部程式碼

class MyPromise {
  constructor(excutor) {
    // 狀態
    this._state = "pending";
    // 成功回撥
    this._callbacks_resolved = [];
    // 失敗回撥
    this._callbacks_rejected = [];
    // 執行
    excutor(
      (data) => {
        // 避免重複執行
        if (this._state !== "pending") {
          return;
        }
        // 儲存結果
        this._data = data;
        // 狀態變更
        this._state = "resolved";
        // 處理
        this._handle();
      },
      (err) => {
        if (this._state !== "pending") {
          return;
        }
        // 錯誤資訊
        this._err = err;
        // 狀態變更
        this._state = "rejected";
        this._handle();
      }
    );
  }
  then(onfulfilled, onrejected) {
    return new MyPromise((resolve, reject) => {
      this._callbacks_resolved.push((data) => {
        // 沒有處理，直接往後傳
        if (!onfulfilled) {
          return resolve(data);
        }
        try {
          let r = onfulfilled(data);
          // 有then函式
          if (r && typeof r.then === "function") {
            return r.then(resolve, reject);
          }
          resolve(r);
        } catch (e) {
          // 有錯誤直接向後傳
          reject(e);
        }
      });
      this._callbacks_rejected.push((err) => {
        if (!onrejected) {
          return reject(err);
        }
        try {
          let r = onrejected(err);
          if (r && typeof r.then === "function") {
            return r.then(resolve, reject);
          }
          resolve(r);
        } catch (e) {
          reject(e);
        }
      });
      this._handle()
    });
  }

  catch(onrejected) {
    return this.then(undefined, onrejected);
  }

  _handle() {
    if (this._state === "pending") {
      return;
    }
    // 為什麼要延時，then的東西是不能馬上執行的，可以看看micro-task和macro-task，這裡只能模擬
    setTimeout(() => {
      if (this._state === "resolved") {
        this._callbacks_resolved.forEach((cb) => cb(this._data));
      } else {
        this._callbacks_rejected.forEach((cb) => cb(this._err));
      }
      this._callbacks_resolved = [];
      this._callbacks_rejected = [];
    });
  }
}