浏览器工作原理与实践
李兵
前盛大创新院高级研究员
56402 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
浏览器工作原理与实践
15
15
1.0x
00:00/00:00
登录|注册

19 | Promise:使用Promise,告别回调函数

异步回调对编码方式的影响
页面的事件循环系统
Promise错误的“冒泡”性质
合并多个任务的错误处理
回调函数返回值穿透
回调函数的延时绑定
消灭嵌套调用
使处理流程变得线性
代码逻辑不连续
Promise出错后异常的“冒泡”传递
回调函数返回值穿透的实现
Promise中微任务的引入原因
Promise中微任务的应用
Promise中引入微任务的原因
多次错误处理
嵌套调用
then和catch方法
resolve和reject函数
executor函数
Promise对象的构造函数
封装异步代码
解决异步编程的问题
思考时间
Promise与微任务
Promise消灭嵌套调用和多次错误处理
Promise的使用方法
Promise的动机
Promise

该思维导图由 AI 生成,仅供参考

上一篇文章中我们聊到了微任务是如何工作的,并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用 Promise,DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的,而且新的前端框架也使用了大量的 Promise。可以这么说,Promise 已经成为现代前端的“水”和“电”,很是关键,所以深入学习 Promise 势在必行。
不过,Promise 的知识点有那么多,而我们只有一篇文章来介绍,那应该怎么讲解呢?具体讲解思路是怎样的呢?
如果你想要学习一门新技术,最好的方式是先了解这门技术是如何诞生的,以及它所解决的问题是什么。了解了这些后,你才能抓住这门技术的本质。所以本文我们就来重点聊聊 JavaScript 引入 Promise 的动机,以及解决问题的几个核心关键点。
要谈动机,我们一般都是先从问题切入,那么 Promise 到底解决了什么问题呢?在正式开始介绍之前,我想有必要明确下,Promise 解决的是异步编码风格的问题,而不是一些其他的问题,所以接下来我们聊的话题都是围绕编码风格展开的。

异步编程的问题:代码逻辑不连续

首先我们来回顾下 JavaScript 的异步编程模型,你应该已经非常熟悉页面的事件循环系统了,也知道页面中任务都是执行在主线程之上的,相对于页面来说,主线程就是它整个的世界,所以在执行一项耗时的任务时,比如下载网络文件任务、获取摄像头等设备信息任务,这些任务都会放到页面主线程之外的进程或者线程中去执行,这样就避免了耗时任务“霸占”页面主线程的情况。你可以结合下图来看看这个处理过程:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Promise:解决异步编程问题的利器 JavaScript的异步编程模型给编码方式带来了影响,导致代码逻辑不连续和回调地狱等问题。本文介绍了Promise作为解决异步编程问题的方案,重点讨论了Promise如何消除嵌套调用和合并多个任务的错误处理。通过封装异步代码,Promise使得处理流程变得线性,提高了代码的可读性和可维护性。文章通过具体的代码示例和图示,生动地展示了Promise的应用场景和解决问题的方式。Promise通过回调函数延迟绑定、回调函数返回值穿透和错误“冒泡”技术解决了多层嵌套和频繁错误处理的问题。此外,文章还分析了Promise之所以要使用微任务是由Promise回调函数延迟绑定技术导致的。Promise的使用方式使得代码更加优雅,更加符合人的线性思维。通过本文的深入浅出的介绍,读者可以快速了解Promise的动机和解决的问题,为读者提供了对Promise的初步了解和认识。 总结:本文深入探讨了Promise作为解决JavaScript异步编程问题的利器。通过消除嵌套调用和合并多个任务的错误处理,Promise使得处理流程变得线性,提高了代码的可读性和可维护性。文章生动地展示了Promise的应用场景和解决问题的方式,包括回调函数延迟绑定、回调函数返回值穿透和错误“冒泡”技术。此外,文章还分析了Promise之所以要使用微任务的原因。通过本文的深入浅出的介绍,读者可以快速了解Promise的动机和解决的问题,为读者提供了对Promise的初步了解和认识。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《浏览器工作原理与实践》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(48)

  • 最新
  • 精选
  • 空间
    异步AJAX请求是宏任务吧?Promise是微任务,那么用Promise进行的异步Ajax调用时宏任务还是微任务?

    作者回复: ajax就是xmlhttprequest,必然是宏任务! 准确地说,Promise在执行resolve或者reject时,触发微任务,所以在Promise的executor函数中调用xmlhttprequest会触发宏任务。 如果xmlhttprequest请求成功了,通过resolve触发微任务 如果xmlhttprequest请求失败了,通过reject触发微任务

    2019-09-18
    2
    69
  • 皮皮大神
    老师,我觉得这章没有前面的讲得透彻,手写的bromise非常不完整,希望老师答疑的时候可以带我们写一遍完整promise源码,三种状态的切换,还有.then为什么可以连续调用,内部如何解决多层异步嵌套,我觉得都很值得讲解,老师带我们飞。

    作者回复: 这个加餐可以有! 这篇问题主要在宏观视角建立对Promise的认知。 关于手写 或者细节内容课程结束之后我们慢慢聊。 目前被编辑追稿子压力大,好多问题没及时回复还望理解哈。课程结束之后我会相信回复大家的问题的。

    2019-09-18
    11
    29
  • 許敲敲
    面试手写promise也不怕了

    作者回复: 手写我加餐来讲

    2019-09-17
    9
    4
  • Chao
    老师 你有答疑环节吗

    作者回复: 有,现在写稿子时间紧,等我主要稿件写完会抽出大把时间来专门解答问题。

    2019-09-17
    2
    3
  • 任振鹏
    老师 渲染流水线 在 微任务 之前 还是 之后 执行啊?

    作者回复: 微任务也可以不触发渲染操作,也可以出发渲染操作! 比如你也可以在微任务中通过js来修改dom,触发重绘,重排等动作! 你也可以在微任务中执行一些逻辑运算,这就和页面渲染没有关系了!

    2019-12-07
    1
  • Geek_6b0898
    想问下老师什么时候给加餐课?支持老师尽快出啊

    作者回复: 快了,快了,最近家里小孩生病住院,折腾了好久,刚出院!

    2019-11-12
    1
  • 袋袋
    老师,最后说定时器的效率不高,promise又把定时器改造成了微任务,可以说下具体是怎么改造的吗

    作者回复: 微任务是v8来实现的,具体实现方式等我课程录完来手写一个Promise。

    2019-09-18
    1
  • 蓝配鸡
    请问老师你用的什么工具画图?

    作者回复: mac下的keynote

    2019-11-01
  • 花儿与少年
    老师会在加班课里给大家讲解典型课后思考题吗

    作者回复: 会的,可以把你的问题列出来,我答疑时会有针对性

    2019-09-19
  • Geek_Jamorx
    这三个题目非常重要,就跟做笔记一样回答了 1、Promise 中为什么要引入微任务? 由于promise采用.then延时绑定回调机制,而new Promise时又需要直接执行promise中的方法,即发生了先执行方法后添加回调的过程,此时需等待then方法绑定两个回调后才能继续执行方法回调,便可将回调添加到当前js调用栈中执行结束后的任务队列中,由于宏任务较多容易堵塞,则采用了微任务 2、Promise 中是如何实现回调函数返回值穿透的? 首先Promise的执行结果保存在promise的data变量中,然后是.then方法返回值为使用resolved或rejected回调方法新建的一个promise对象,即例如成功则返回new Promise(resolved),将前一个promise的data值赋给新建的promise 3、Promise 出错后,是怎么通过“冒泡”传递给最后那个捕获 promise内部有resolved_和rejected_变量保存成功和失败的回调,进入.then(resolved,rejected)时会判断rejected参数是否为函数,若是函数,错误时使用rejected处理错误;若不是,则错误时直接throw错误,一直传递到最后的捕获,若最后没有被捕获,则会报错。可通过监听unhandledrejection事件捕获未处理的promise错误
    2019-09-17
    8
    88
收起评论
显示
设置
留言
48
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部