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。

相关文章

springboot家政服务管理平台 LW +PPT+源码+讲解

springboot家政服务管理平台 LW +PPT+源码+讲解

3系统的可行性研究及需求分析 3.1可行性研究 3.1.1技术可行性分析 经过大学四年的学习，已经掌握了JAVA、Mysql数据库等方面的编程技巧和方法，对于这些技术该有的软硬件配置也是齐全的，能够满足开发的需要。 本家政服务管理平台采用的是Mysql作为数据库，可以绝对地保证用户数据的安全；可以与Mysql数据库进行无缝连接。 所以，家政服务管理平台在技术上是可以实施的。 3.1
阅读更多...
高仿精仿愤怒的小鸟android版游戏源码

高仿精仿愤怒的小鸟android版游戏源码

这是一款很完美的高仿精仿愤怒的小鸟android版游戏源码，大家可以研究一下吧、 为了报复偷走鸟蛋的肥猪们，鸟儿以自己的身体为武器，仿佛炮弹一样去攻击肥猪们的堡垒。游戏是十分卡通的2D画面，看着愤怒的红色小鸟，奋不顾身的往绿色的肥猪的堡垒砸去，那种奇妙的感觉还真是令人感到很欢乐。而游戏的配乐同样充满了欢乐的感觉，轻松的节奏，欢快的风格。 源码下载
阅读更多...
基于Java医院药品交易系统详细设计和实现(源码+LW+调试文档+讲解等)

基于Java医院药品交易系统详细设计和实现(源码+LW+调试文档+讲解等)

💗博主介绍：✌全网粉丝10W+,CSDN作者、博客专家、全栈领域优质创作者，博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码+数据库🌟 感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人  Java精品实战案例《600套》 2023-2025年最值得选择的Java毕业设计选题大全：1000个热
阅读更多...
美容美发店营销版微信小程序源码

美容美发店营销版微信小程序源码

打造线上生意新篇章 一、引言：微信小程序，开启美容美发行业新纪元 在数字化时代，微信小程序以其便捷、高效的特点，成为了美容美发行业营销的新宠。本文将带您深入了解美容美发营销微信小程序，探讨其独特优势及如何助力商家实现业务增长。 二、微信小程序：美容美发行业的得力助手 拓宽客源渠道：微信小程序基于微信社交平台，轻松实现线上线下融合，帮助商家快速吸引潜在客户，拓宽客源渠道。 提升用户体验：
阅读更多...
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等

风水研究会官网源码系统-可展示自己的领域内容-商品售卖等

一款用于展示风水行业，周易测算行业，玄学行业的系统，并支持售卖自己的商品。 整洁大气，非常漂亮，前端内容均可通过后台修改。 大致功能： 支持前端内容通过后端自定义支持开启关闭会员功能，会员等级设置支持对接官方支付支持添加商品类支持添加虚拟下载类支持自定义其他类型字段支持生成虚拟激活卡支持采集其他站点文章支持对接收益广告支持文章评论支持积分功能支持推广功能更多功能，搭建完成自行体验吧！ 原文
阅读更多...
HTML5文旅文化旅游网站模板源码

HTML5文旅文化旅游网站模板源码

文章目录 1.设计来源文旅宣传1.1 登录界面演示1.2 注册界面演示1.3 首页界面演示1.4 文旅之行界面演示1.5 文旅之行文章内容界面演示1.6 关于我们界面演示1.7 文旅博客界面演示1.8 文旅博客文章内容界面演示1.9 联系我们界面演示 2.效果和源码2.1 动态效果2.2 源代码2.3 源码目录 源码下载万套模板，程序开发，在线开发，在线沟通 作者：xcLeigh
阅读更多...
mediasoup 源码分析 （八）分析PlainTransport

mediasoup 源码分析 （八）分析PlainTransport

mediasoup 源码分析 （六）分析PlainTransport 一、接收裸RTP流二、mediasoup 中udp建立过程 tips 一、接收裸RTP流 PlainTransport 可以接收裸RTP流，也可以接收AES加密的RTP流。源码中提供了一个通过ffmpeg发送裸RTP流到mediasoup的脚本，具体地址为：mediasoup-demo/broadcaste
阅读更多...
JavaScript Promise技术

JavaScript Promise技术

你可能已经知道Promises现在已经是JavaScript标准的一部分了。Chrome 32 beta版本已经实现了基本的Promise API。如今，Promise的概念在web开发中已经不是什么新鲜玩意了。我们中的大多数人已经在一些流行的JS库例如Q、when、RSVP.js中使用过了Promises。即使是jQuery中也有一个和Promises很类似叫做Deferred的东西。但是Ja
阅读更多...
Java并发编程—阻塞队列源码分析

Java并发编程—阻塞队列源码分析

在前面几篇文章中，我们讨论了同步容器(Hashtable、Vector），也讨论了并发容器（ConcurrentHashMap、CopyOnWriteArrayList），这些工具都为我们编写多线程程序提供了很大的方便。今天我们来讨论另外一类容器：阻塞队列。 　　在前面我们接触的队列都是非阻塞队列，比如PriorityQueue、LinkedList（LinkedList是双向链表，它实现了D
阅读更多...
线程池ThreadPoolExecutor类源码分析

线程池ThreadPoolExecutor类源码分析

Java并发编程：线程池的使用 　　在前面的文章中，我们使用线程的时候就去创建一个线程，这样实现起来非常简便，但是就会有一个问题： 　　如果并发的线程数量很多，并且每个线程都是执行一个时间很短的任务就结束了，这样频繁创建线程就会大大降低系统的效率，因为频繁创建线程和销毁线程需要时间。 　　那么有没有一种办法使得线程可以复用，就是执行完一个任务，并不被销毁，而是可以继续执行其他的任务？
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2