乐趣区

关于前端:Promise源码渐进式解读三

jiezi

关注前端小讴，浏览更多原创技术文章

回顾：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的链式回调（多个还未实现）

截至本节的代码 →

退出移动版