玩转异步 JS :async/await 简明教程(附视频下载)

课程介绍

在软件开发领域,简洁的代码 => 容易阅读的代码 => 容易维护的代码,而 ES2017 中的 async/await 特性能让我们编写出相比回调地狱和 Promise 链式调用更直观、更容易理解的代码,await 关键字接收一个 Promise,等待代码执行,直到 Promise 状态变为 resolved 或者 rejected,这种特性能让我们的异步代码阅读起来更像是同步代码。

本课程共 8 小节 20 分钟,将会从编写简单的 async/await 函数开始,用实例带领大家探索 async/await 实战的方方面面,比如如何结合 Promise 和 await 关键字?如何定义不同类型的 async 函数?如何安全的使用 async/await,即处理错误?如何让多个 await 串行或并行?如何在循环中正确使用 await?

适用人群

  • [required] 具备 JS 基础知识,知道如何运行 Node.js 脚本;
  • [required] 知道 Callback、Promise 等异步处理概念;
  • [optional] 期望学习新的异步特性,编写更简洁易懂易维护的代码;
  • [optional] 期望不断打磨自己的 JS 技能,让自己变得更值钱;

内容目录

1. 编写第一个 async/await 函数

手把手教你把发起 HTTP 请求并解析响应的代码改写成 async/await 风格,让你学会 async/await 的基本语法。

2. 将 async 函数用在 Promise 链中

带你探索如何在 Promise 链中像使用其他 Promise 一样无缝使用 async 函数。

3. 把任意类型的函数转成 async 风格

实例演示如何将任意函数写成 async 风格,包括函数声明、函数表达式、箭头函数、类方法、对象方法等。

4. 处理 async 函数中的错误

不同于 Promise 中的 .catch() 错误处理机制,在 async 函数中,我们需要使用 try/catch 结构来恰当的处理错误。

5. 正确处理多个 await 操作的并行串行

学会通过移动 await 关键词的位置实现多个 await 操作串行或者并行,并且用数据证明让多个异步操作并行的性能优势。

6. 使用 Promise.all() 让多个 await 操作并行

学会使用 ES2015 中的解构和 Promise.all() 实现多个异步操作的并行,非常适合需要同时发起多个请求的情形,代码可读性不打折扣。

7. 结合 await 和任意兼容 .then() 的代码

await 操作符并不仅仅局限于 ES2015 的 Promise,可以和任意兼容 .then() 方法的代码使用,通过实例学会如何与流行的 Promise 库结合使用。

8. 在 for 循环中正确的使用 await

理解 for 循环中 await 不同写法带来的性能影响,以及改进的方法。

源码链接

代码仓库:wangshijun/course-javascript-async-await

运行方法(请确保系统中安装了 Node.js):

git clone https://github.com/wangshijun/course-javascript-async-await.git
cd course-javascript-async-await
node xxx.js

上面的 xxx.js 对应每节课程的源码,列表如下:

  1. 编写第一个 async/await 函数
  2. 将 async 函数用在 Promise chain 中
  3. 把任意类型的函数转成 async 风格
  4. 处理 async 函数中的错误
  5. 正确处理多个 await 操作的并行串行
  6. 使用 Promise.all() 让多个 await 操作并行
  7. 结合 await 和任意兼容 .then() 的代码
  8. 在 for 循环中正确的使用 await

运行环境

  • Node.js v8.6.0
  • VSCode v1.17.1 Vim

参考资料

  • Google Web Fundamentals

视频下载

关注《前端周刊》微信公众号,回复 course-async-await 即可获取高清视频教程下载地址。

题外话

最后,可能你有同学会问,我为什么要做这个公开课?接下来的计划是什么?请阅读好久不见,我总感觉欠你点什么

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 无法找到函数定义,找到定义Linux函数的位置

使用手册页对于基本的C函数,该手册页应该工作。man 2 readman 3 printf第2节为系统调用(直接到内核),而第3是用于标准C库调用。您通常可以省略该部分,并且人将自己弄清楚您需要什么。请注意,您可能需要采取额外步骤在系统上获取与…

序列自动机—— [FJOI2016]所有公共子序列问题

序列自动机&#xff1a; 是一个处理子序列的自动机。就这样。 建造&#xff1a;&#xff08;By猫老师&#xff1a;immoralCO猫&#xff09; s[] next[][26] memset(next[n], -1, 26<<2); for(int i n; i; --i) {memcpy(next[i - 1], next[i], 26 << 2);next[i - 1…

1000种对Java的响应没有死

当一篇评论发表1000条评论时&#xff0c;值得考虑一下。 我上周的社论“ 如果Java即将死&#xff0c;它肯定看起来非常健康 ”在各个开发人员社区中都感到不安 。 在Reddit&#xff0c;Hacker News和Slashdot之间&#xff0c;它收到了1000多个评论。 奇怪的是&#xff0c;很少…

java导包

下载响应的zip文件&#xff0c;就可以导入了&#xff0c;导入src目录也是可以的。 转载于:https://www.cnblogs.com/liaoxiaolao/p/9902062.html

分享轮子-flutter下拉刷新上拉加载

flutter下拉上拉组件轮子 什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Native是同样的目的,支持三大平台:Android,Ios,还有一个是google新出的系统,忘了叫什么...本人React Native也是用过…

linux块设备驱动中断程序,linux设备驱动归纳总结(六):1.中断的实现

linux设备驱动归纳总结(六)&#xff1a;1.中断的实现xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx一、什么是中断中断分两种&#xff1a;1)中断&#xff0c;又叫外部中断或异步中断&#xff0c;它的产生是由于外设向处理器发出中断…

(8)Python判断结构

转载于:https://www.cnblogs.com/hankleo/p/9170325.html

Java:本地最小语言

在1996年至2002年之间&#xff0c;我用Java编写了成千上万行代码。我用Java 1.0到Java 1.4编写了Web框架&#xff0c;电子表格以及更多内容。 与90年代中期&#xff08;预模板&#xff09;的C 相比&#xff0c;Java是一种完全令人惊奇的语言。 JVM是所有计算机语言的最佳运行时…

History of program(1950-2020)

1957年 约翰巴科斯&#xff08;John Backus&#xff09;创建了是全世界第一套高阶语言&#xff1a;FORTRAN。 John Backus1959年 葛丽丝霍普&#xff08;Grace Hopper&#xff09;创造了现代第一个编译器A-0 系统&#xff0c;以及商用电脑编程语言“COBOL”&#xff0c;被誉为C…

关于 Nuxt 集成ueditor的一些坑(包括图片上传)前端部分

最近公司接了一个项目&#xff0c;里面用到富文本编辑器&#xff0c;刚开始用的是vue-quill-editor&#xff0c;这个编辑器轻量、好用。最重要的是它有专门正对nuxt的版本&#xff0c;很容易配置&#xff0c;可以放心使用&#xff0c;不用担心bug之类的&#xff0c;遇到问题&am…

linux 线程带参数,Linux中多线程编程并传递多个参数的简单例子

今天上午实验了Linux下的多线程编程&#xff0c;并将多个参数传递给线程要执行的函数。以下是实验程序的源代码&#xff1a;/*********************** pthread.c ***************************/#include #include #include #include #include struct argument{int num;char stri…

*Codeforces989D. A Shade of Moonlight

数轴上$n \leq 100000$个不重叠的云&#xff0c;给坐标&#xff0c;长度都是$l$&#xff0c;有些云速度1&#xff0c;有些云速度-1&#xff0c;风速记为$w$&#xff0c;问在风速不大于$w_{max}$时&#xff0c;有几对云可能在0相遇。每一对云单独考虑。 多动一不动--相对运动。假…

undefined reference 问题各种情况分析

扒自网友文章 关于undefined reference这样的问题&#xff0c;大家其实经常会遇到&#xff0c;在此&#xff0c;我以详细地示例给出常见错误的各种原因以及解决方法&#xff0c;希望对初学者有所帮助。 1. 链接时缺失了相关目标文件&#xff08;.o&#xff09; 测试代码如下&a…

Spring交易可见性

在初始化应用程序上下文时&#xff0c;Spring遇到带有Transactional标记的类时会创建代理。 Transactional可以应用于类级别或方法级别。 在类级别应用它意味着该类中定义的所有公共方法都是事务性的。 Spring创建的代理类型&#xff0c;即Jdk代理或CGLIB代理&#xff0c;取决于…

Axios 作弊表(Cheat Sheet)

英文原文链接 GET 请求 // Make a request for a user with a given ID axios.get(/user?ID12345).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// Optionally the request above could also be done as axios.get(…

loadrunner post请求

注意&#xff1a;loadrunner参数中的引号&#xff0c;需要自己加"\" post 请求&#xff0c;分为header 和body两个部分处理 header部分比较容易处理&#xff0c;使用函数实现&#xff0c;如web_add_header("pid","1")即可&#xff0c;具体参数可…

2018-2019-1 20165203 《信息安全系统设计基础》第六周学习总结

2018-2019-1 20165203 《信息安全系统设计基础》第六周学习总结 教材学习内容总结 重要知识点 I/O&#xff1a;在主存和外部设备&#xff08;例如磁盘存储器、终端和网络&#xff09;之间复制数据的过程。输入操作&#xff1a;从I/O设备复制数据到主存。输出操作&#xff1a;从…

linux 使用VI命令怎么删除输入内容,linux系统vi编辑器常用命令及使用方法。

在linux系统中编辑文档我们常用到vi编辑器。vi编辑器&#xff0c;通常称之为vi,是一种广泛存在于各种UNIX和Linux系统中的文本编辑程序。它的功能十分强大&#xff0c;但是命令繁多&#xff0c;不容易掌握&#xff0c;它可以执行输出、删除、查找、替换、块操作等众多文本操作&…

Spring安全–幕后

安全任务&#xff08;例如&#xff0c;用户身份验证和用户查看应用程序资源的授权&#xff09;通常由应用程序服务器处理。 可以将这些任务委托给Spring安全性流程&#xff0c;以减轻应用程序服务器处理这些任务的负担。 Spring安全性基本上通过实现标准javax.servlet.Filter来…

在react中使用svg的各种骚姿势

开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts 优势 SVG可被非常多的工具读取和修改(比如vscode)不失真, 放大缩小图像都很清晰SVG文件是纯粹的XML, 也是一种DOM结构使用方便, 设计软件可以直接导出 兼容性 上一张兼容性图表, 或到caniuse.com查看 …