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

38次阅读

共计 8316 个字符，预计需要花费 21 分钟才能阅读完成。

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

回顾：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没有回调的链式调用

截至本节的代码 →

正文完
前端
发表至： 前端
2021-10-20
 0
关于前端:vue源码-导航守卫的整体逻辑
关于前端:js获取媒体查询屏幕的属于哪种屏幕
关于前端:Module-Federation在客服工单业务中的最佳实践
关于前端:Vue3-Typescript-Axios-全栈开发教程手把手教你写待办清单APP