全栈工程师修炼指南
熊燚(四火)
Oracle首席软件工程师
立即订阅
2286 人已学习
课程目录
已更新 43 讲 / 共 40 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 从成长角度看,为什么你应该成为全栈工程师?
免费
学习路径 | 怎样成为一名优秀的全栈工程师?
导读 | 如何学习这个专栏?
第一章 网络协议和 Web 接口 (6讲)
01 | 网络互联的昨天、今天和明天:HTTP 协议的演化
02 | 为HTTP穿上盔甲:HTTPS
03 | 换个角度解决问题:服务端推送技术
04 | 工整与自由的风格之争:SOAP和REST
05 | 权衡的艺术:漫谈Web API的设计
06 | 特别放送:北美大厂如何招聘全栈工程师?
第二章 欢迎来到 MVC 的世界 (7讲)
07 | 解耦是永恒的主题:MVC框架的发展
08 | MVC架构解析:模型(Model)篇
09 | MVC架构解析:视图(View)篇
10 | MVC架构解析:控制器(Controller)篇
11 | 剑走偏锋:面向切面编程
12 | 唯有套路得人心:谈谈Java EE的那些模式
13 | 特别放送:选择比努力更重要
第三章 从后端到前端 (7讲)
14 | 别有洞天:从后端到前端
15 | 重剑无锋,大巧不工:JavaScript面向对象
16 | 百花齐放,百家争鸣:前端MVC框架
17 | 不一样的体验:交互设计和页面布局
18 | 千言万语不及一幅画:谈谈数据可视化
19 | 打开潘多拉盒子:JavaScript异步编程
20 | 特别放送:全栈团队的角色构成
第四章 数据持久化 (7讲)
21 | 赫赫有名的双刃剑:缓存(上)
22 | 赫赫有名的双刃剑:缓存(下)
23 | 知其然,知其所以然:数据的持久化和一致性
24 | 尺有所短,寸有所长:CAP和数据存储技术选择
25 | 设计数据持久层(上):理论分析
26 | 设计数据持久层(下):案例介绍
27 | 特别放送:聊一聊代码审查
第五章 寻找最佳实践 (6讲)
28 | Ops三部曲之一:配置管理
29 | Ops三部曲之二:集群部署
30 | Ops三部曲之三:测试和发布
31 | 防人之心不可无:网站安全问题窥视
32 | 和搜索引擎的对话:SEO的原理和基础
33 | 特别放送:聊一聊程序员学英语
第六章 专题 (7讲)
34 | 网站性能优化(上)
35 | 网站性能优化(下)
36 | 全栈开发中的算法(上)
37 | 全栈开发中的算法(下)
38 | 分页的那些事儿
39 | XML、JSON、YAML比较
40 | 全栈衍化:让全栈意味着更多
全栈工程师修炼指南
登录|注册

19 | 打开潘多拉盒子:JavaScript异步编程

四火 2019-10-23
你好,我是四火。
我们在本章伊始的 [第 14 讲] 中初步学习了 JavaScript 的事件驱动模型,体会到了思维模式的转变,也建立起了异步编程的初步概念。在本章最后一讲,我们将深入异步编程,继续探讨其中的关键技术。
异步编程就像是一个神秘的宝盒,看起来晶莹剔透,可一旦使用不当,就会是带来灾难的潘多拉盒子,状态混乱,难以维护。希望在这一讲之后,你可以了解更多的关于 JavaScript 在异步编程方面的高级特性,从而习惯并写出可靠的异步代码。

1. 用 Promise 优化嵌套回调

假如我们需要写这样一段代码,来模拟一只小狗向前奔跑,它一共跑了 3 次,奔跑的距离分别为 1、2、3,每次奔跑都要花费 1 秒钟时间:
setTimeout(
() => {
console.log(1);
setTimeout(
() => {
console.log(2);
setTimeout(
() => {
console.log(3);
},
1000
);
},
1000
);
},
1000
);
你看,我们用了 3 次 setTimeout,每次都接受两个参数,第一个参数是一个函数,用以打印当前跑的距离,以及递归调用奔跑逻辑,第二个参数用于模拟奔跑耗时 1000 毫秒。这个问题其实代表了实际编程中一类很常见的 JavaScript 异步编程问题。例如,使用 Ajax 方式异步获取一个请求,在得到返回的结果后,再执行另一个 Ajax 操作。
现在,请你打开 Chrome 开发者工具中的控制台,运行一下:
3693
1
2
3
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《全栈工程师修炼指南》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(7)

  • 二狗
    异步 各种箭头嵌套 js好难读 好难懂
    2019-11-06
    1
  • pyhhou
    1. Promise 以及 async/await 在目前开发的项目中均有用到,async/await 非常好用,用同步的风格写异步的代码,让代码清晰易懂,但是并不建议任何地方都加上 async/await,这会失去 JavaScript 异步的优势,比如说相互没有关联性的 I/O 处理,可以考虑使用 Promise.all(),另外建议尽量不要在循环里面写 async/await 进行 I/O 请求,这会严重影响程序运行效率

    2. 个人不敢苟同。不得不承认 JavaScript 是一门有设计缺陷的语言,在其诞生之初仅仅是为了解决简单的问题,并没有什么宏伟的目标和规划,但是随着 Web 的迅速发展,JavaScript 的应用领域越来越广泛,从前端页面到后端的 Node,JavaScript 逐渐吸收其他语言的设计思想并结合自身情况进行重新设计,让其编写更自然也更高效。其实并不认同 “给编程人员的阅读和理解造成困扰”,像 Promise 的出现本身就是为了解决异步编码风格的问题,而不是其他问题,也许这会对那些只会 JavaScript,并且只会用 JavaScript 写简单的前端页面的人有困扰,但是对大多数程序员来说是好事。另外说到学习曲线,JavaScript 现在在前后端上都可以进行开发,难道说传统的后端语言,比如,Java、C++ 就没有学习曲线吗?应用领域变广泛,技术变多,学习曲线递增其实是再正常不过的事情,不过,到头来,还是像老师说的那样,技术都是相通的,理解其背后的思想是关键

    作者回复: 👍

    2019-11-05
  • 李威
    好难懂啊

    作者回复: 老实说,这可能是这个专栏里面最难的两、三篇文章之一了。
    要是有些内容你始终搞不懂,并且把具体问题讲出来的话,可以讨论

    2019-11-02
  • 咕叽咕叽
    1,主要使用过如下的异步编程:使用过利用异步编程,将大的计算任务分成小的计算任务。当时的场景是页面滚动的同时,需要大量计算,某些手机会卡顿。将计算分成小的异步任务,可以保证滚动的流畅
    2,个人不是很认同这种看法。写起来简单得js语法,可能阅读,维护比较困难,毕竟代码主要是给人看的。就如本文用Promise / async,await改善之前的嵌套写法,代码更优雅。

    作者回复: 👍

    2019-10-29
  • 零维
    老师,如何使用 promise 和 generator 模拟出 await 的返回值呢?
    如果用 async/awiat:
     const res = await ajax();
    变成 yield 是:
      const res = yield ajaxWrap();

    res 是怎么用 ajaxWrap 里面出来的呢?
    2019-10-28
    2
  • 靠人品去赢
    这个promise“异步”变“同步”,就是让异步代码看起来像同步一样,刚看第一遍没看明白,还有就是箭头函数,箭头多了,我就不能第一时间看明白,看来还是用得少。

    作者回复: 用得少是一个方面,本来 JavaScript 如果书写的时候不注意结构和组织的话,确实容易写出难懂的代码

    2019-10-25
  • tt
    老师,JavaScript和Python确实太像了,尤其是异步函数、生成器以及协程的部分。

    那么,对于小规模的团队,JavaScript+Python或者JavaScript+node.js的组合是不是比JavaScript+java在开发速度上更有优势呢?

    作者回复: 这个问题不太好回答,我也没有足够的统计数据。据我个人的经历,Python 开发效率确实是要比 Java 高出不少

    2019-10-23
收起评论
7
返回
顶部