Promise源码渐进式解读（四）

2023-12-17 03:58
文章标签 源码 解读 promise 渐进式

本文主要是介绍Promise源码渐进式解读（四），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关注[前端小讴]，原创技术文章

回顾：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处理程序，没有则为nullonRejected: [Function (anonymous)], // onRejected处理程序，没有则为nullpromise: 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 rettry {/*** 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没有回调的链式调用

截至本节的代码 →

这篇关于Promise源码渐进式解读（四）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/502981。

相关文章

解读静态资源访问static-locations和static-path-pattern

解读静态资源访问static-locations和static-path-pattern

《解读静态资源访问static-locations和static-path-pattern》本文主要介绍了SpringBoot中静态资源的配置和访问方式,包括静态资源的默认前缀、默认地址、目录结构、访... 目录静态资源访问static-locations和static-path-pattern静态资源配置
阅读更多...
Go中sync.Once源码的深度讲解

Go中sync.Once源码的深度讲解

《Go中sync.Once源码的深度讲解》sync.Once是Go语言标准库中的一个同步原语,用于确保某个操作只执行一次,本文将从源码出发为大家详细介绍一下sync.Once的具体使用,x希望对大家有... 目录概念简单示例源码解读总结概念sync.Once是Go语言标准库中的一个同步原语，用于确保某个操
阅读更多...
MySQL中时区参数time_zone解读

MySQL中时区参数time_zone解读

《MySQL中时区参数time_zone解读》MySQL时区参数time_zone用于控制系统函数和字段的DEFAULTCURRENT_TIMESTAMP属性,修改时区可能会影响timestamp类型... 目录前言1.时区参数影响2.如何设置3.字段类型选择总结前言mysql 时区参数 time_zon
阅读更多...
MySQL中的锁和MVCC机制解读

MySQL中的锁和MVCC机制解读

《MySQL中的锁和MVCC机制解读》MySQL事务、锁和MVCC机制是确保数据库操作原子性、一致性和隔离性的关键,事务必须遵循ACID原则,锁的类型包括表级锁、行级锁和意向锁,MVCC通过非锁定读和... 目录mysql的锁和MVCC机制事务的概念与ACID特性锁的类型及其工作机制锁的粒度与性能影响多版本
阅读更多...
Redis过期键删除策略解读

Redis过期键删除策略解读

《Redis过期键删除策略解读》Redis通过惰性删除策略和定期删除策略来管理过期键,惰性删除策略在键被访问时检查是否过期并删除,节省CPU开销但可能导致过期键滞留,定期删除策略定期扫描并删除过期键,... 目录1.Redis使用两种不同的策略来删除过期键，分别是惰性删除策略和定期删除策略1.1惰性删除策略
阅读更多...
Redis与缓存解读

Redis与缓存解读

《Redis与缓存解读》文章介绍了Redis作为缓存层的优势和缺点,并分析了六种缓存更新策略,包括超时剔除、先删缓存再更新数据库、旁路缓存、先更新数据库再删缓存、先更新数据库再更新缓存、读写穿透和异步... 目录缓存缓存优缺点缓存更新策略超时剔除先删缓存再更新数据库旁路缓存(先更新数据库，再删缓存）先更新数
阅读更多...
Java汇编源码如何查看环境搭建

Java汇编源码如何查看环境搭建

《Java汇编源码如何查看环境搭建》：本文主要介绍如何在IntelliJIDEA开发环境中搭建字节码和汇编环境,以便更好地进行代码调优和JVM学习,首先,介绍了如何配置IntelliJIDEA以方... 目录一、简介二、在IDEA开发环境中搭建汇编环境2.1 在IDEA中搭建字节码查看环境2.1.1 搭建步
阅读更多...
C#反射编程之GetConstructor()方法解读

C#反射编程之GetConstructor()方法解读

《C#反射编程之GetConstructor()方法解读》C#中Type类的GetConstructor()方法用于获取指定类型的构造函数,该方法有多个重载版本,可以根据不同的参数获取不同特性的构造函... 目录C# GetConstructor()方法有4个重载以GetConstructor(Type[]
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
MCU7.keil中build产生的hex文件解读

MCU7.keil中build产生的hex文件解读

1.hex文件大致解读 闲来无事,查看了MCU6.用keil新建项目的hex文件 用FlexHex打开 给我的第一印象是:经过软件的解释之后,发现这些数据排列地十分整齐 :02000F0080FE71:03000000020003F8:0C000300787FE4F6D8FD75810702000F3D:00000001FF 把解释后的数据当作十六进制来观察 1.每一行数据
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2