玩转异步 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,一经查实,立即删除!

相关文章

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

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

(8)Python判断结构

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

History of program(1950-2020)

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

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

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

*Codeforces989D. A Shade of Moonlight

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

undefined reference 问题各种情况分析

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

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

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

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

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

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

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

3.2自定义方法

方法是类的一种行为,方会使我们的代码容易修改,方便阅读,实现封装和重用。比如前面使用的很多.net定义好的类的方法,当然我们也可以自定义方法。 3.2.1定义方法 语法: 访问修饰符 返回类型 方法名(参数列表) &#xff…

[Electron]仿写一个课堂随机点名小项目

自从前几个月下了抖音,无聊闲暇时就打会打开抖音,因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频:随机点名 于是仿写了一个课堂点名小项目,算是对Electron的一个简单的认识,有时间再深入。 项目…

linux redis安装使用,linux安装redis

Linux(CentOS)中Redis介绍、安装、使用【一篇就够】2018-05-13 13:36:16 sjmz30071360 阅读数 1590更多分类专栏: redis版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。一、介绍Redis is…

用three.js写一个简单的3D射门游戏

这个小游戏很简单,一共由3个部分构成。1个平面(球场),1个球体(足球)还有一个立方体(球门)。 上个图给你们感受一下简陋的画风(掘金最高上传5M图片,原来图片都…

100份Spring面试问答-最终名单(PDF下载)

上次更新时间:2019年2月11日 这是有关Spring框架的一些最重要问题的摘要,在面试或面试测试过程中可能会要求您回答这些问题! 您无需担心下一次面试的机会,因为Java Code Geeks在这里为您服务! 您可能会被问到的大多数…

3.1 unittest简介

3.1 unittest简介 前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG。python里面也有单元测试框架-unittest,相当于是一个python版的junit。python里面的单元测试框架除了unittest,还有一个pytest框架,这个用的比较少,后面有空再继…

织梦其他模型使用联动类型地区联动

官方模型的联动类型只能模型是在【独立模型】或者官方默认的【分类信息】模型下使用,其他模型下使用无效,我们来让联动类型支持所有模型。 添加联动地区类型字段 内容模型管理 - 文章模型(或者其他模型) - 添加新字段 字段名称 和 数据类型 千万别搞错了…

使用IntelliJ IDEA进行热部署

最近,在PrimeFaces论坛PrimeFaces IDE Poll中进行了投票,以投票赞成用于开发PrimeFaces应用程序的最佳IDE。 最多人投票支持NetBeans。 NetBeans和Eclipse是免费的IDE。 我最喜欢的IDE IntelliJ IDEA Ultimate不是免费的,我认为这就是为什么在…

创梦天地关嵩:借力腾讯云,打造文娱新生态——云+未来峰会回顾

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 今年腾讯云未来峰会主题的关键词是“焕启”,这是包含无限希望的两个字,让人倍感振奋。“焕启”是什么意思?在我的理解中,“焕启”本身就是激活,激…

【缓存清理工具】缓存清理软件_电脑缓存清理软件

产品介绍 有很多种比如来自网页和windows等,缓存如果不经常清理会使你的机器运行速度变慢,缓存清理工具可以帮你最多程度的清理垃圾文件而且速度也很快,有了它的帮助让你爱机清理彻底,运行更加顺畅!主要能清理:所有应…

c语言转义字符空格符号,C语言 转义符\t占用几个空格

这个问题,在你学习编程过程中可能会考虑到,有时为了字节对齐而使用转义符中\t,但是到底\t占用几个空格呢?下面我们首先通过程序来体验下,然后在总结#include int main(){printf("123456\t123\t45\n");printf("12\t…