图片来自互联网
什么是async？
async函数是ES7中出现的异步操作的解决方案，而且它被很多人认为是异步操作的终极解决方案，那么回想一下，之前我们还学过哪些异步操作的解决方案。
如果你脑子里两个解决方案都想不出来，那说明你对Javascript异步操作的学习还不够充分，建议回去重新温习理解一下异步操作这块知识。
现在我们按照出现时间的先后梳理一下：
回调函数PromiseGeneratorasync对于前三者，本文暂不详述，今天只针对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人已购
查看