Promise原始碼漸進式解讀（三）

小謳發表於2021-10-18
Promise原始碼
關注前端小謳，閱讀更多原創技術文章

回顧：Promise原始碼漸進式解讀（一）
回顧：Promise原始碼漸進式解讀（二）

完整程式碼+註釋，可對照閱讀

Promise.prototype.then - 原始碼

/** Promise原型的then屬性，指向函式
 * 引數onFulfilled：onResolved處理程式，在期約兌現時執行的回撥
 * 引數onRejected：onRejected處理程式，在期約拒絕時執行的回撥
 * 支援無限鏈式回撥，每個then()方法返回新的Promise例項
 */
Promise.prototype.then = function (onFulfilled, onRejected) {
  // console.log(this, 'then') // this指向then()前返回的Promise例項
  // console.log(this.constructor) // constructor指向Promise建構函式
  // console.log(this.constructor === Promise) // true

  /* 建立一個新期約例項（相當於new Promise(noop)），傳入空方法noop作為執行器函式
     注意：每次呼叫.then()都建立新的Promise例項，但呼叫下一個.then()會將上一個Promise例項的_deferreds陣列改變（放入下一個的Handler例項）！
  */
  var prom = new this.constructor(noop) // -> var prom = new Promise(noop) -> var prom = new Promise(()=>{})
  // console.log(prom) // Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }，新期約
  // console.log(new Promise(noop)) // Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }，同上

  /**
   * handle()方法
   * 引數this：then()前返回的上一個Promise例項
   * 引數new Handler(onFulfilled, onRejected, prom)：建立的Handler例項
   */
  handle(this, new Handler(onFulfilled, onRejected, prom))

  return prom // 返回新建立的期約例項，以便鏈式呼叫
}

function noop() {}
  • then指向的函式中的this，指向當前then前返回的Promise例項，因此this.constructor指向Promise建構函式

  • 每次呼叫Promise.then時：

    • 將空方法noop作為執行器函式，呼叫new this.constructor()建立一個新的空Promise例項
    • 還會新建立一個Handler例項，然後呼叫handle()方法
    • 最終都返回新建立的期約例項，這是為了支援無限鏈式回撥
    • “呼叫下一個.then()會將上一個Promise例項的_deferreds陣列改變”，可後續再研究

Handler 建構函式 - 原始碼

/** Handler建構函式：打包onFulfilled、onRejected和promise，作為一個整體方便後面呼叫
 * 引數onFulfilled：resolve回撥函式
 * 引數onRejected：reject回撥函式
 * 引數promise：新的空promise例項
 */
function Handler(onFulfilled, onRejected, promise) {
  this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null // 是否有成功回撥，若沒有則賦為null
  this.onRejected = typeof onRejected === 'function' ? onRejected : null // 是否有失敗回撥，若沒有則賦為null
  this.promise = promise // Handler的promise，指向prom，即在.then()中建立的新Promise例項
  // console.log(this.promise, 'new Handler')
  // console.log(this)
}
  • 接收 3 個引數：成功回撥、失敗回撥新的空promise例項

handle() - 測試程式碼

  • 在原始碼的基礎上加以簡化，方便做階段測試
/** 測試用的handle()方法
 * 引數self：then()前返回的Promise例項
 * 引數deferred：建立的Handler例項
 */
function handle(self, deferred) {
  // console.log(self)
  // console.log(deferred)

  /* deferred為建立的Handler例項
    Handler {
      onFulfilled: [Function (anonymous)], // onFulfilled處理程式，沒有則為null
      onRejected: [Function (anonymous)], // onRejected處理程式，沒有則為null
      promise: Promise { // promise屬性指向一個新的Promise例項
        _state: 0,
        _handled: false,
        _value: undefined,
        _deferreds: []
      }
    }
  */

  /* 如果返回的期約例項的解決值為promise型別，_state=3 */
  while (self._state === 3) {
    self = self._value // 將解決值賦給返回的期約例項
  }

  /* 如果返回的期約例項是pendding狀態，_state=0，即還沒有執行resolve()或reject()方法 */
  if (self._state === 0) {
    self._deferreds.push(deferred) // 將Handler例項放入例項的_deferrends陣列，然後返回，繼續等待
    console.log(self)
    return
  }

  /* 標記當前進行的promise._handled為true */
  self._handled = true
  console.log(self)

  /* 通過事件迴圈非同步來做回撥的處理（注意：這裡是非同步的！） */
  Promise._immediateFn(function () {
    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected // 獲取onFulfilled或onRejected處理程式

    /* 如果有onFulfilled或onRejected回撥函式，則執行自己的回撥 */
    try {
      /**
       * cb()方法：執行onFulfilled或onRejected處理程式
       * 引數self._value：then()前返回的Promise例項的解決值/拒絕理由
       */
      cb(self._value) // 執行回撥
    } catch (e) {
      /* 若丟擲錯誤，則呼叫reject()方法，引數為建立的Handler例項的promise（新Promise例項）和錯誤原因 */
      reject(deferred.promise, e)
      return
    }
  })
}

  • then前返回的期約例項，根據_state值的不同，做不同的處理

    • 返回非待定的期約，最終會執行then中的處理程式
    • 返回待定的期約，則不會執行then中的處理程式，但會將then中生成的Handler例項放入then前Promise例項的_deferreds陣列
  • 執行then中的處理程式是非同步的，會在所有同步操作都執行完才去執行

Promise.prototype.then - 階段測試

new Promise((resolve, reject) => {}).then(() => {
  console.log(3) // then前是未解決的期約，期約解決前不會執行處理程式
})
/* 執行到handle()時，self._state為0，將Handler例項放入例項的_deferrends陣列，不再執行後續操作，self為：
  Promise {
    _state: 0,
    _handled: false,
    _value: undefined,
    _deferreds: [
      Handler { 
        onFulfilled: [Function (anonymous)], 
        onRejected: null, 
        promise: Promise {_state: 0, _handled: false, _value: undefined, _deferreds: []}
      }
    ]
  }
*/

new Promise((resolve, reject) => {
  /* 實際執行首個resolve或reject後，後續的resolve或reject不會再執行，這裡僅把測試結果合併 */

  resolve(3) // 列印res為3，解決值為基本型別
  /* self為Promise { _state: 1, _handled: true, _value: 3, _deferreds: [] } */
  resolve({ val: 3 }) // 列印res為{ val: 3 }，解決值為普通物件
  /* self為Promise { _state: 1, _handled: true, _value: { val: 3 }, _deferreds: [] } */
  resolve(new Promise(() => {})) // 不列印res，解決值為pending的期約例項
  /* self與new Promise((resolve, reject) => {}).then()基本相同，onFulfilled不再是null*/
  resolve(Promise.resolve(3)) // 列印res為3，解決值為fullfilled的期約例項，將fullfilled的解決值賦給self
  /* self為Promise { _state: 1, _handled: true, _value: 3, _deferreds: [] } */
  resolve({
    // 解決值為thenable物件
    value: 3,
    then: function () {
      console.log(this) // { value: 3, then: [Function: then] }
      console.log(this.value) // 3
    },
  })
  /* self與resolve(new Promise(() => {}))相同 */
}).then((res) => {
  console.log(res) // then()前返回的Promise的解決值
})

new Promise((resolve, reject) => {
  reject(3) // 列印res為3
  /* self為Promise { _state: 2, _handled: true, _value: 3, _deferreds: [] } */
}).then(null, (err) => {
  console.log(err) // then()前返回的Promise的拒絕理由
})

  • 大體有了鏈式回撥的雛形：

    • 能夠根據Promise例項的狀態，獲取其解決值/拒絕理由，並執行相應的處理程式（onResolve或onReject）
  • pedding狀態的期約呼叫then後，會將then中生成的Handler例項放入其_deferreds陣列

Promise.prototype.catch - 原始碼

/** Promise原型的catch屬性，指向函式
 * 引數onRejected：onRejected處理程式，在期約拒絕時執行的回撥
 * 支援無限鏈式回撥，每個catch()方法返回新的Promise例項
 */
Promise.prototype['catch'] = function (onRejected) {
  return this.then(null, onRejected)
}
  • 在Promise.prototype.then上做一層封裝，只接收onRejected處理程式

Promise.prototype.catch - 階段測試

new Promise((resolve, reject) => {}).catch(() => {
  console.log(3) // catch前是未解決的期約，期約解決前不會執行處理程式（同then）
})

new Promise((resolve, reject) => {
  /* 實際執行首個resolve或reject後，後續的resolve或reject不會再執行，這裡僅把測試結果合併 */

  reject(4) // 4，拒絕理由為基本型別
  /* self為Promise { _state: 2, _handled: true, _value: 4, _deferreds: [] } */
  reject({ val: 4 }) // { val: 4 }，拒絕理由為普通物件
  /* self為Promise { _state: 2, _handled: true, _value: { val: 4 }, _deferreds: [] } */
  throw Error('error!') // 'Error: error!'，丟擲錯誤
  /* self為Promise { _state: 2, _handled: true, _value: Error: error!, _deferreds: [] } */
  reject(new Promise(() => {})) // 'Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }'，期約本身作為拒絕理由（需與resolve區分）
  /* self為Promise { _state: 2, _handled: true, _value: Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }, _deferreds: [] } */
  reject(Promise.resolve(3)) // 'Promise { _state: 1, _handled: false, _value: 3, _deferreds: [] }'，同上，期約本身作為拒絕理由，與期約狀態無關
  /* self為Promise { _state: 2, _handled: true, _value: Promise { _state: 1, _handled: false, _value: 3, _deferreds: [] }, _deferreds: [] } */
}).catch((err) => {
  console.log(err) // catch()前返回的Promise的拒絕理由
})
  • 與Promise.prototype.then的結果大致相同，需區分catch前期約的拒絕理由是Promise例項的情況

實現結果總結

  • 單個Promise.prototype.then和Promise.prototype.catch的鏈式回撥（多個還未實現）

截至本節的程式碼 →

相關文章