【JavaScript教程】#14 轻松入门 JavaScript Async Await | Async Await 比 Promise 更好用？让你快速掌握 async await 异步执行概念

https://youtu.be/zoZiQJ38bXk

☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！ 我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。 ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #javascript-async-await #javascript教学 #编程入门

文字内容：

Hi, 大家好，我是文轩

欢迎再次收看文轩解码

如果你想和其他同学一起学习和讨论JavaScript编程

可以扫描这个二维码

去到自学编程社区里和其他同学一起互动

async await 在2017年正式被纳入到EcmaScript规范里

作为异步执行最新的调用方法

它把Promise带到了另一个高度

Promise解决了callback hell

那async await要解决什么问题呢？

async await的出现

主要是让想程序员在编写异步执行代码的时候

以更简洁，更直观的方法呈献

程序员在维护程序的时候

需要阅读大量的源代码去了解程序是怎么运行的

越直观的代码

程序员就越快明白代码的逻辑

我给同学对比两组代码

这两组代码执行的逻辑是一样的

首先执行requestResultA异步函数

在得到resultA之后

再执行requestResultB异步函数

最终打印resultB

上面是用then和回调函数编写

下面是用async await编写

同学们一眼看去

哪个比较直观呢？

我个人觉得啊

即便同学没学过异步执行的概念

也会觉得下面的代码比较直观一点

一眼就能看懂这几行代码的逻辑

这和我们平常执行同步代码大差不差

上面的代码还是相对复杂一点

需要在then里提供回调函数

如果同学是刚接触JavaScript

看到这些代码肯定是脑洞大开的

这就是async await要达到的终极目标

它希望新手在学习异步执行概念的时候更容易上手

比起同步执行的function

这个异步函数(async function)多了两个关键字

那就是async和await

async关键字是用来定义这个函数是一个异步函数

也只有在async函数里才能使用await关键字

因为requestResultA和requestResultB

异步函数都会返回Promise

所以我们需要在它们的前面加一个await

await的意思是等待

等待异步函数完成任务

当程序执行到第一个await

程序就会等待requestResultA

异步函数完成超长任务

当requestResultA完成任务并返回resultA

程序才会继续执行下一行

下一行又有一个await

所以又需要等待requestResultB完成任务

当这个任务完成后

程序才能执行下一行的console.log

这样执行异步函数

是不是比较直观好理解？

好的

现在我们切换到VS Code里编写async await的代码

接下来我们用async await

模拟到远程服务器获取用户数据

让同学们实操要怎么运用

 async await等待promise完成任务

我们先来创建一个异步执行的函数

我们叫它sendRequest

我们用它来模拟发送请求到远程服务器

这个function会返回一个Promise object

我们插入return关键字

然后new Promise()语句创建Promise object

创建完Promise object

程序立刻返回这个Promise object

接着我们在new Promise的小括号里插入回调函数

这个函数是用来执行我们的异步代码

先插入一个空白的function

然后在参数列表输入两个参数

resolve和reject

resolve和reject是函数

当Promise完成任务后

就会调用resolve()告诉程序任务已经完成

可以返回

当Promise不能完成既定任务

就需要调用reject()

告诉程序任务完成不了

接下来

我们会用setTimeout定时器模拟发送请求

在函数体输入setTimeout()

setTimeout有两个参数

第一个参数是当定时器时间到了要执行的代码

第二个参数是等待的毫秒数

第一个参数先输入空白的函数

然后在第二个参数输入2000毫秒

接着我们在函数体里输入过了两秒之后要执行的代码

我们在函数体里输入resolve("John Doe")

模拟在两秒后用resolve返回用户名John Doe

好的 我们发送请求的异步函数就完成了

接下来我们要执行这个异步函数

在这里我们输入

sendRequest

小括号

sendRequest函数会返回Promise

所以我们需要把sendRequest函数

返回的Promise object赋予一个变量

我们不能直接打印promise变量获取用户名

因为promise变量只是一个Promise object

我打印给你们看看

保存刷新

嗯 

console是不会显示最终的答案

它显示的是处于待定的Promise object

要想得到从resolve返回的最终答案

我们需要使用then()

在then里获取用户名

我们在下一行输入promise.then()

在then里我们用回调函数

打印从resolve返回的用户名

先输入一个空白函数

resolve返回的用户名会体现在回调函数的参数里

所以我们需要在回调函数里添加一个参数

我们叫它username

然后接着用console.log打印出这个username

现在我们保存刷新代码

看看发送模拟请求后

能不能收到从resolve返回用户名

嗯，是可以的

console这里现在是输出John Doe

而不是刚才的Promise object

刚才演示怎么用then去获取promise返回的最终值

接下来主角要登场了

我们接下来会用await去执行sendRequest函数

先把这代码删掉

然后输入await 

sendRequest() 

await sendRequest() 会直接返回用户名

所以我们需要把它赋予一个变量

接着我们用console.log打印出username的值

我们来保存刷新页面看看能不能打印出John Doe

console面板现在报错

它说await只能用在有async关键字的函数里

我们必须修改一下代码

把这两行代码放在async函数里

先来创建一个async function

我们叫它getUsername

接着把这两行代码移到getUsername函数里

然后我们调用这个getUsername() 函数

好的，现在我们来保存代码

刷新页面看看最终的效果

嗯，两秒之后

console会打印John Doe

程序首先会执行getUsername()函数

然后在getUsername()函数里

再调用sendRequest()函数

然后等待sendRequest完成执行任务

当sendRequest完成任务后

会通过resolve返回用户名

并把这个用户名赋予username变量

最终用console.log打印出John Doe

await关键字是用来等待promise完成任务

所以await后面一般会尾随返回promise的函数

刚才我们演示了Promise resolve的部分

正常返回结果

那如果Promise reject呢？

我们的async await要怎么捕捉reject返回的错误

我们先把resolve换成reject

然后把用户名换成错误信息

Request rejected due to server error

保存刷新页面

嗯，当Promise执行reject

程序就会报错

这时候程序应该捕捉类似的错误

避免程序崩溃

在async await里

我们需要使用try catch语句捕捉错误

先插入try

大括号

然后catch

小括号

大括号

从字面上来看

同学们就应该能猜出这段代码的逻辑

try的部分就是尝试执行会报错的代码

catch的部分则用来捕捉错误信息

然后做对应的处理

我们把这两行代码移到try的部分

接着在catch的部分打印错误信息

如果要打印reject返回的错误信息

我们需要在catch的小括号里添加一个参数

reject返回的信息会体现在这里

我们叫它message吧

添加了这个message参数

我们就可以利用console.log打印这个参数

显示reject返回的错误信息

在这里输入console.log

Error

message

好的，现在我们来保存代码

看看我们的try catch

能不能捕捉reject返回的错误信息

嗯，是可以的

红色的错误信息消失了

只显示这一行字符串

我们这个示例只是简单的在console输出字符串

一般在线的程序会做更深入的处理

像在页面里提示用户程序报错

或者把这些报错数据传到后台

方便程序员分析这些信息

刚才给你们演示怎么调用自定义的

sendRequest函数

模拟获取用户信息

接下来

我们用Fetch函数

实际发送请求到远程服务器获取用户信息

我们先把sendRequest删掉

然后输入fetch

 接着在小括号里输入获取用户数据的网址

fetch返回的数据的格式不是JSON格式

所以我们需要在获取原始数据后进行格式转换

将原始数据转换成JSON格式的数据

我们在下一行输入

username = await username.json()

当fetch成功获取原始数据

原始数据会被赋予username

要转换username里的原始数据至JSON格式

我们就用username.json()

username.json()会返回promise

所以我们需要在username.json()前面添加await

等待格式转换完成

当原始数据成功被转换

JSON数据就会再次赋予username

所以最终username变量的值

是JSON格式的用户数据

先保存代码

刷新页面看看

嗯，这里正确显示JSON格式的用户数据

好的

今天关于async-await的讲解就差不多了

我们来总结一下吧

async await 让异步执行代码更贴近同步执行代码

方便刚入门JavaScript的新手编写异步执行代码

async await的概念是由Promise基础上演变

并不是全新的概念

要深入理解async await

还是需要先了解Promise

async function会返回Promise object

await关键字只能在async function里使用

await关键字必须尾随promise object

await会等待promise完成任务

才执行下一行代码

使用try catch语句捕捉async await出现的错误

好的

今天的分享就到这里

有疑问的话欢迎去到自学编程社区里提问

喜欢这个视频就拜托点赞分享吧

我们下期见

拜拜！