前端小知识：大厂必考async

图片来自互联网

什么是async？

async函数是ES7中出现的异步操作的解决方案，而且它被很多人认为是异步操作的终极解决方案，那么回想一下，之前我们还学过哪些异步操作的解决方案。

如果你脑子里两个解决方案都想不出来，那说明你对Javascript异步操作的学习还不够充分，建议回去重新温习理解一下异步操作这块知识。

现在我们按照出现时间的先后梳理一下：

• 回调函数
• Promise
• Generator
• async

对于前三者，本文暂不详述，今天只针对async函数进行分析。

async函数用法详解

了解了async的用途和基本概念之后，下面我们来讲讲async函数的用法。

async函数的用法中有三个点大家必须记住：

• async函数返回的是一个Promise对象（即使你返回的不是Promise对象，它也会帮你将返回的数据包装成Promise对象返回），因此可以直接使用then方法添加回调函数
• await只能在async函数中使用，作用是获取Promise函数中返回的内容，即获取Promise中resolve或者reject中的内容
• async函数在执行时，一旦遇到await就会先返回执行主线程，等到异步操作完成后，再继续执行函数体内的语句。

说了这么多，下面上个例子帮助大家理解：

 1//请求城市天气函数，返回Promise对象，实际工程中可以放入ajax请求
 2const reqWeather=(city)=>{
 3 return new Promise((resolve,reject)=>{
 4 if(city==="HangZhou"){
 5 resolve("sunny");
 6 }else{
 7 reject("失败")
 8 }
 9 })
10}
11//定义async函数，函数名为getWeather
12const getWeather=async ()=>{
13 const weather=await reqWeather("HangZhou"); //此时await获取的是resolve中的内容sunny
14 return weather
15};
16//async函数返回的是一个Promise对象，所以可以直接在后面添加then回调函数
17getWeather().then((data)=>{
18 console.log(data); //sunny
19});

async函数使用注意事项

上面说过，await获取的是Promise对象中resolve或者reject中的内容，如果是获取resolve中的内容，那是完全没有问题，但是如果获取的是reject中的内容，那么就会报错。

获取reject内容例子：

将上面代码中的第13行改为如下代码：

1const weather=await reqWeather("Beijing");

我们发现最后打印的结果如下所示：

报错截图

显然我们不想系统在运行时报如下红色的错误提示。

解决办法：

将await函数外层用try...catch...包裹，以此来捕捉错误

即将13行代码改为如下代码：

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

改正后结果如下：

结果图

以上就是今天的所有内容了，关注我，每天学习一点前后端知识，一起从码农走向高级工程师

专栏

必须掌握的前端面试题

作者：小刘爱学习

10币

0人已购

查看