Promise源码渐进式解读(四)
发布于 1 个月前 作者 simon9124 631 次浏览 来自 分享

关注前端小讴,阅读更多原创技术文章

回顾:Promise源码渐进式解读(一) 回顾:Promise源码渐进式解读(二) 回顾:Promise源码渐进式解读(三)

完整代码+注释,可对照阅读

多个 then 串联 - 遗留的问题

/* 暂时还未实现:不少于2个的.then()链式调用 */
new Promise((resolve, reject) => {
  resolve(3)
})
  .then((res) => {
    /* 调用第1个then时,prom为当前then前返回的期约实例,是解决的期约实例,解决值为3
       在handle()里打印self为Promise { _state: 1, _handled: true, _value: 3, _deferreds: [] }
       将继续异步执行处理程序 */
    return res
  })
  .then((res) => {
    /* 调用第2个then时,prom为当前then前返回的期约实例,是第1个then返回的prom,是一个新创建的、未解决的期约实例
    将当前then中生成的Handler实例放入当前then前返回的期约实例的_deferreds数组,然后暂停并返回
    此时handle()里打印self为Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [ Handler {...} ] } */
    console.log(res) // 不打印res,第2个then及后面的处理程序,暂时还未实现
  })
  • 多个then链式调用时,从第 2 个then开始,then前返回的Promise实例都是pending状态的空期约实例,因此都会Handler实例放入then前返回的Promise实例的_deferreds数组
  • 本节将详细讲解handle()finale()2 个方法,重点剖析Promise实例的_deferreds数组在放入Handler实例后的操作,应反复阅读

handle() - 源码

  • 终于到了handler()的源码!其实仅比上一节的测试代码完善了一些内容,我们主要观察多个then的串联(以 2 个为例)
/** handle()方法:核心
 * 参数self:上一个then()前返回的Promise实例
 * 参数deferred:本次创建的Handler实例
 */
function handle(self, deferred) {
  // console.log(self, 'handle')
  // 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 // 将解决值赋给返回的期约实例
    // console.log(self)
  }

  /* 如果_state=0,即期约实例是pendding状态(还未执行onResolve或onReject处理程序) */
  /* 链式调用时,第二个或之后的then()前返回的Promise实例永远是新的Promise实例,其_state值为0 */
  if (self._state === 0) {
    self._deferreds.push(deferred) // 将Handler实例放入上一个then()前返回的Promise实例的_deferrends数组,由于上一个Handler实例的promise指向上一个Promise实例,因此上一个Handler实例也受到相应的影响
    // console.log(self, 'push')
    /* 
      Promise {
        _state: 0,
        _handled: false,
        _value: undefined,
        _deferreds: [
          Handler {
            onFulfilled: [Function (anonymous)],
            onRejected: [Function (anonymous)],
            promise: [Promise]
          }
        ]
      }
    */
    return // 同步执行到此暂停,等待异步执行(执行前一个Promise的then里面的onResolve)
  }

  /* 如果不是上述情况,标记当前进行的promise._handled为true */
  self._handled = true
  // console.log(self)

  /** 通过事件循环异步来做回调的处理
   * 注意:这里的事件是异步执行的,第二个then会比这里的方法先执行
   */
  Promise._immediateFn(function () {
    // console.log(deferred, '_immediateFn') // 注意:当有不少于2个.then()时,前一个.then()生成的Handler实例,其promise指向的Promise实例的_deferreds指向问题(后一个.then()里包含onFulfilled或onRejected回调函数,_deferreds不再指向空数组而是包含后一个Handler实例的数组)

    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected // 根据上一个then()前的Promise实力的_state,获取onFulfilled或onRejected处理程序
    // console.log(cb)

    /* 如果没有onFulfilled或onRejected回调函数,则携带当前的_value值,等待下一个Promise对象的回调 */
    if (cb === null) {
      // console.log(deferred.promise, self._value)
      ;(self._state === 1 ? resolve : reject)(deferred.promise, self._value)

      /**
       * resolve()或reject方法:等待下一个Promise对象的回调
       * 参数deferred.promise:Handler实例的promise,指向上一个then()前的Promise实例
       * 参数self._value:上一个then()前返回的Promise实例的_value属性值
       */
      // resolve(deferred.promise, self._value)
      // reject(deferred.promise, self._value)

      return
    }

    /* 如果有onFulfilled或onRejected回调函数,则执行自己的回调 */
    var ret
    try {
      /**
       * cb()方法:执行onFulfilled或onRejected处理程序
       * 参数self._value:then()前返回的Promise实例的解决值/拒绝理由
       */
      ret = cb(self._value) // 执行回调,返回值赋给ret
    } catch (e) {
      /**
       * reject()方法:处理下一个catch的回调方法
       * 参数deferred.promise:创建的Handler实例的promise属性,指向新的Promise实例
       * 参数e:错误信息
       */
      reject(deferred.promise, e)
      return
    }

    /**
     * resolve()方法:处理下一个then的回调方法
     * 参数deferred.promise:Handler实例的promise,指向上一个then()前的Promise实例
     * 参数ret:执行当前then回调的返回值
     */
    // console.log(deferred.promise, ret)
    resolve(deferred.promise, ret)
  })
}
  • 第 2 个then前返回的Promise实例一定是pending状态,因此第 2 个then中生成的Handler实例会放入第 2 个then前返回的Promise实例的_deferreds数组
  • 重点来了,还记得Handler构造函数么?
    • 每调用 1 次then,都生成 1 个Handler实例,2 个then串联会生成 2 个Handler实例
    • 每个Handler实例的promise,都指向当前then中生成的Promise实例prom(也就是下一个then前返回的Promise实例)
    • 但由于第 2 个then改变了第 2 个then前返回的Promise实例(_deferreds数组放入Handler实例),因此第 1 个Handler实例也随之改变
    • 打开handle()尾部的注释console.log(deferred.promise, ret)可更好的观察Handler实例的变化
    • 总结来说,就是第 1 个Handler实例的promise属性指向的Promise实例,其_deferreds数组也放入了第 2 个Handler实例
  • 第 2 个重点就是,调用处理程序后,会再次调用resolve()方法,保证第 2 个then能获取到第 1 个then中的返回值
    • 还记得么?在resolve()中,会给其_state_value赋值,并调用finale()方法。因此我们来到最后的源码——finale()方法

finale() - 源码

/** finale()方法
 * 参数self:(期约)实例
 */
function finale(self) {
  // console.log(self, 'finale')

  /* 如果_state的值为2(Promise执行reject()方法),且未提供回调函数(或未实现catch函数),则给出警告 */
  if (self._state === 2 && self._deferreds.length === 0) {
    /**
     * 执行Promise构造函数的_immediateFn()方法
     * 参数fn:要执行的警告方法
     */
    Promise._immediateFn(function () {
      /* 如果未被处理过,则给出警告 */
      if (!self._handled) {
        /**
         * 执行Promise构造函数的._unhandledRejectionFn()方法
         * 参数self._value:拒绝理由
         */
        Promise._unhandledRejectionFn(self._value)
      }
    })
  }

  /* 循环self._deferreds,每一项都执行handle()方法 */
  for (var i = 0, len = self._deferreds.length; i < len; i++) {
    /**
     * handle()方法
     * 参数self:(期约)实例
     * 参数self._deferreds[i]:当前的Handle实例对象
     */
    // console.log(self, self._deferreds[i])
    handle(self, self._deferreds[i])
  }

  self._deferreds = null // 全部执行后,将_deferreds数组重置为null
}
  • 终于到了_deferreds数组真正起作用的时候了!finale()会循环这个数组,然后给每一项执行handle()
  • handle一起,2 个then串联的过程就是:
    • 第 1 个then前返回Promise实例(调用resolve()finale()_deferreds数组为空到此结束)
    • 调用第 1 个then,调用handle()Promise._immediateFn放入异步线程 1
    • 调用第 2 个then,第 2 个then前返回的Promise实例的_state为 0,将第 2 个Handle实例放入第 2 个then前返回的Promise实例的_deferreds数组后返回(因此改变了第 1 个Handle
    • 进入异步线程 1,执行第 1 个then的处理方法后,再次调用resolve()finale()_deferreds数组不为空因此调用handle()Promise._immediateFn放入异步线程 2
    • 进入异步线程 2,执行第 2 个then的处理方法后,再次调用resolve()finale()_deferreds数组为空全部结束
  • 如果上述流程还不明晰,下面会用测试例子一步一步的详解

多个 then 的链式调用 - 阶段测试

new Promise((resolve, reject) => {
  resolve(3)
})
  .then((res) => {
    console.log(res)
    return 4
  })
  .then((res) => {
    console.log(res)
    return 5
  })
  • 根据源码,上述代码的完整调用流程为:
    • new Promise((resolve, reject) => {resolve(3)})
      • 执行new Promise,创建Promise实例,返回这个Promise实例
      • 执行doResolve()同步立即执行执行器函数(resolve, reject) => {resolve(3)}
      • 执行resolve(3),将Promise实例的_state赋为 1、_value赋为 3
      • 执行finale()Promise实例的_deferreds[],赋为null后执行结束
      • 返回的Promise实例:Promise { _state: 1, _handled: false, _value: 3, _deferreds: null }
    • .then((res) => {console.log(res);return 4})
      • 执行Promise.prototype.then,创建新Promise实例,传入空方法作为执行器函数,返回这个新的Promise实例
      • 执行new Handler,包装当前的onFulfilled处理程序(res) => {console.log(res);return 4},返回Handler实例
      • 执行handle(),传入上一个then()前返回的Promise实例和Handler实例
        • 上一个Promise实例的_state为 1,将其_handled赋为true,执行Promise._immediateFn(),将当前的onFulfilled处理程序放入异步线程 1
      • 返回Promise实例:Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }
    • .then((res) => {console.log(res);return 5})
      • 执行Promise.prototype.then,创建新Promise实例,传入空方法作为执行器函数,返回这个新的Promise实例
      • 执行new Handler,包装当前的onFulfilled处理程序(res) => {console.log(res);return 5},返回Handler实例
      • 执行handle(),传入上一个then()前返回的Promise实例和Handler实例
        • 上一个Promise实例的_state为 0,将本次的Hander实例放入其_deferreds空数组,return后因为暂无后续.then()同步线程暂停
        • 上一个Promise实例变为:Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [ Handler {} ] }Handler为本次的 Handler实例
        • 重点来了:由于Handler实例的promise指向.then()中创建的Promise实例(prom),因此上一个Handler实例也受到影响,其promise指向的Promise实例(即上一个Promise实例)的_deferreds同样指向[ Handler {} ]
      • 回到异步线程 1,执行上一个Handler实例包装的onFulfilled处理程序,打印 3,返回 4
      • 执行resolve(),传入上一个Handler实例的promise(指向已发生变化的Promise实例)和onFulfilled返回值(4),将_state赋为 1、_value赋为 4
        • 此时已发生变化的Promise实例更新为Promise { _state: 1, _handled: false, _value: 4, _deferreds: [ Handler {} ] }
      • 执行finale(),传入更新的Promise,循环_deferreds数组
      • 执行handle(),传入更新的Promise实例和本次的Handler实例
        • 更新的Promise实例的_state为 1,将其_handled赋为true,执行Promise._immediateFn(),将当前的onFulfilled处理程序放入异步线程 2(嵌套在异步线程 1 中)
      • 由于没有同步线程了,直接来到异步线程 2,执行本次Handler实例包装的onFulfilled处理程序,打印 4,返回 5
      • 执行resolve(),传入本次Handler实例的promise(未发生变化,初始的Promise实例)和onFulfilled返回值(5),将_state赋为 1、_value赋为 5
        • 此时Promise实例更新为Promise { _state: 1, _handled: false, _value: 5, _deferreds: [] }
      • 执行finale(),传入更新的Promise,其_deferreds[],赋为null后执行结束
      • 返回Promise实例:Promise { _state: 0, _handled: false, _value: undefined, _deferreds: [] }
  • 再次总结:
    • new Promise执行器函数同步的,最先执行
    • 无论多少个.then,其创建新Promise实例、创建Handle实例及handle()方法的前半部分(直至Promise._immediateFn前)都是同步的,依次执行
    • 后面的.then会改变前面返回的Promise实例,从而改变前面生成的Handle实例
    • 同步执行完毕后,执行首个.thenhandle()中的异步方法Promise._immediateFn,开启异步线程
      • 在异步线程的最后,执行resolve()方法再执行finale()方法
      • 此时传入的Promise实例的_deferreds不再是空数组,而是放入了下一个.then中的处理方法
      • 进而再次执行handle()方法及其中的Promise._immediateFn
        • 异步线程中嵌套新的异步线程,直至最终执行完毕

then 与 catch 交替的链式调用 - 阶段测试

Promise.resolve(1)
  .catch((err) => {
    console.log(3) // 不打印,resolve后面不执行onRejected处理程序
    return 3
  })
  .then((res) => {
    console.log(res) // 1
  })

Promise.reject(1)
  .then((res) => {
    console.log(2) // 不打印,reject后面不执行onResolved处理程序
    return 2
  })
  .catch((err) => {
    console.log(err) // 1
  })
  • resolve后面不会执行onRejected处理程序,reject后面不执行onResolved处理程序

中间的 then 或 catch 没有回调 - 阶段测试

new Promise((resolve, reject) => {
  resolve(3)
})
  .then() // 没有回调,等待下个Promise的回调
  .then((res) => {
    console.log(res)
  })

new Promise((resolve, reject) => {
  reject(4)
})
  .catch() // 没有回调,等待下个Promise的回调
  .catch((res) => {
    console.log(res)
  })
  • 携带当前的_value值,等待下一个Promise对象的回调
    • handle()方法里Promise._immediateFn里的cb===null,根据thenPromise对象的类型(解决/拒绝),调用resolve()reject()方法

实现结果总结

  • 已实现:
    • 多个then(catch)的链式调用
    • thencatch交替的链式调用
    • 中间的thencatch没有回调的链式调用

截至本节的代码 →

回到顶部