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

回顾：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实例

    • 同步执行结束后，执行首个.then中handle()中的异步办法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，依据then前Promise对象的类型（解决/回绝），调用resolve()或reject()办法

实现后果总结

  • 已实现：

    • 多个then(catch)的链式调用
    • then与catch交替的链式调用
    • 两头的then或catch没有回调的链式调用

截至本节的代码 →