怎麼去實現一個簡潔版的promise?

怎麼去實現一個簡潔版的promise?

// 三個常量用於表示狀態
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
    const that = this
    this.state = PENDING

    // value 變量用於保存 resolve 或者 reject 中傳入的值
    this.value = null

    // 用於保存 then 中的回調,因爲當執行完 Promise 時狀態可能還是等待中,這時候應該把 then 中的回調保存起來用於狀態改變時使用
    that.resolvedCallbacks = []
    that.rejectedCallbacks = []


    function resolve(value) {
         // 首先兩個函數都得判斷當前狀態是否爲等待中
        if(that.state === PENDING) {
            that.state = RESOLVED
            that.value = value

            // 遍歷回調數組並執行
            that.resolvedCallbacks.map(cb=>cb(that.value))
        }
    }
    function reject(value) {
        if(that.state === PENDING) {
            that.state = REJECTED
            that.value = value
            that.rejectedCallbacks.map(cb=>cb(that.value))
        }
    }

    // 完成以上兩個函數以後,我們就該實現如何執行 Promise 中傳入的函數了
    try {
        fn(resolve,reject)
    }cach(e){
        reject(e)
    }
}

// 最後我們來實現較爲複雜的 then 函數
MyPromise.prototype.then = function(onFulfilled,onRejected){
  const that = this

  // 判斷兩個參數是否爲函數類型,因爲這兩個參數是可選參數
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v=>v
  onRejected = typeof onRejected === 'function' ? onRejected : e=>throw e

  // 當狀態不是等待態時,就去執行相對應的函數。如果狀態是等待態的話,就往回調函數中 push 函數
  if(this.state === PENDING) {
      this.resolvedCallbacks.push(onFulfilled)
      this.rejectedCallbacks.push(onRejected)
  }
  if(this.state === RESOLVED) {
      onFulfilled(that.value)
  }
  if(this.state === REJECTED) {
      onRejected(that.value)
  }
}

個人博客地址:大家可以看看

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章