在前端编程中，经常会遇到异步处理，今天小编为大家简单讲解JS中异步中很著名的async/await，结合之前讲的Promise,相信大家读完这篇文章后会对JS中的异步操作有更深的理解。
什么是异步操作？
在文章开始之前，先为不明白什么是异步操作的同学说一下什么是异步，简单的讲异步代码的执行，不会阻塞后面代码的执行。同学们可能会有疑问，JS作为一门单线程语言是如何做到异步的，这个知识点我会在后面的文章中为大家讲解，这是因为JS的Event Loop(事件循环)。
本文章主要介绍async/await。那么什么是async/await呢？
async
首先async是作为一个关键字出现的，是ES6提出来的一个函数，是针对Generator函数(也是ES6提出来的，后面的文章中为大家详细讲解Generator，阅读本文章，暂时不需要深入了解)的一个语法糖，其用法很简单，就是在普通函数前面加async，即代表这是一个异步函数，代表他后面的代码正常执行，不会因为异步函数的执行，阻塞后面的函数。下面是一个简单的async函数。
async function myFirstAsync () {
return "hello async"
}
myFirstAsync()
console.log("我是同步函数")
上面是一个简单的async函数，为了证明async函数不会阻塞后面代码的执行，我在后面又写了一个同步方法。下面我们看一下控制台执行结果。
捕获.PNG
我们在控制台看到了，async后面的函数可以正常执行，这说明async不会阻塞后面函数的执行。
async函数返回值是什么
感兴趣的同学会疑问，async函数到底返回了什么，我们对上面代码做简单改造，如下
async function myFirstAsync () {
return "hello async"
}
console.log(myFirstAsync())
console.log("我是同步函数")
这时看控制台
1.PNG
显而易见，async返回的是一个Promise对象，同时从另一方面也证明了这是一个异步函数。既然是Promise我们想要拿到他的返回值，就得用到then,我们再次对上面的代码进行改造
async function myFirstAsync () {
return "hello async"
}
myFirstAsync().then((result) => {
console.log(result)
})
console.log("我是同步函数")
这时我们再看控制台
2.PNG
这时我们拿到了async函数的返回值，细心的同学一定会发现，“我是一个同步函数”是先于async函数打印的，而我们在通过
then取值之前是在async函数之后执行的。其实，到现在这一步，才是真正符合JS Event Loop的。上面只是我们看到了Promise，因为我们知道Promise是异步的，到这里，我们从执行顺序上看到了async是一个异步函数。现在我们知道了async返回的是一个Promise,那么我们也一定能像Promise那样捕获他的“成功”和“失败”的状态。正如我们前面看到的那样，“成功”的状态会通过
resolve抛出，“失败”的状态会通过reject抛出，看下面代码
async function myFirstAsync (flag) {
if(flag){
return "成功了!"
}else {
throw "失败了!"
}
}
console.log(myFirstAsync(true))
console.log(myFirstAsync(false))
看控制台输出
3.PNG
当然，我们也可以像Promise那样，对错误做统一处理，因为Promise的错误抛出是冒泡机制。这样我们可以做集中的捕获，我们对上面代码做简单修改如下
async function myFirstAsync (flag) {
if(flag){
return "成功了!"
}else {
throw "失败了!"
}
}
myFirstAsync(true).then((result) => {
console.log(result)
})
myFirstAsync(false).catch((err) => {
console.log(err)
})
看控制台
4.PNG
这是我们顺利拿到了“成功”和“失败”时的抛出值，就像Promise那样，通过
.then拿到成功的值，通过.then或者.catch拿到失败的值，那么async的所有操作，除了不用自己手动创建Promise对象以外，几乎和Promise的操作一模一样，并且我们知道，当Promise逻辑复杂的时候，也会是出现许多的.then，类似地狱回调一样，那么我们怎么像本文章标题中写的那样，彻底告别地狱回调呢？
await
这才是async彻底告别地狱回调的关键，那么什么是await呢？await也是一个关键字，await英文翻译为“等待”，那么它在等待什么呢？我想读这篇文章进入状态的读者已经猜到了，它就是在等async成功。大多数情况下，await后面需要跟一个Promise表达式，并且一定需要注意的是await只能放在async里面！里面！里面！重要的是说三遍。
那么我们现在按照上面说的，写一个完整的async/await方法。
function doublenum (num){
return new Promise ((resolve,reject) => {
setTimeout(
() => {
resolve(2 * num)
} ,2000)
})
}
async function getDoublenum(){
const result = await doublenum(5)
console.log(result )
}
getDoublenum()
这时，我们会在2秒后在控制台输出10，因为比较简单，这里不再截图，这里我们的代码看起来就像同步代码一样，不依赖任何结果。哪怕是逻辑再复杂，我们也可以像同步编程一样写异步操作。
现在我们让我们的代码进行更多的数字操作
function doublenum (num){
return new Promise ((resolve,reject) => {
setTimeout(
() => {
resolve(2 * num)
} ,2000)
})
}
async function getDoublenum(){
const result1 = await doublenum(5)
const result2 = await doublenum(10)
const result3 = await doublenum(15)
const result4 = await doublenum(20)
const result5 = await doublenum(25)
const result6= await doublenum(30)
console.log(result1 + result2 + result3 +result4 +result5 +result6 )
console.log('我写在后面，但是我先执行')
}
getDoublenum()
这时，我们看控制台
5.PNG
控制台会在12秒后打印210，这是我们意料之中的，意料之外的是，它并没有像我们预期的那样，让同步代码先执行。这就是
await的作用，它阻塞了后面的同步代码，这也正是async/await和Promise不同的地方,它让异步代码变成同步代码一样，所以JS Event Loop的微任务宏任务中并没有有async/await。虽然他们是基于Promise的封装。上面的代码的执行过程是这样的，执行到result1 ，等待两秒，执行result2，等待2秒，result2执行完毕，再执行result3,以此类推...所以说，我们的异步代码，在用了await以后，是会停下来的，这也从原理上说明了为什么上面的代码会阻塞同步代码。结合全篇文章来看，使用
async/await，使我们的代码变得更加简洁，不会再出现地狱回调，并且await的阻塞，为我们提供了一些特殊需求的解决方案。说到底，async/await和Promise还是很不同的，至于我们在日常的开发中使用哪种异步处理，就要因需求而定了，假如二者都可以满足需求，这里建议使用async/await,至于二者的对比，这里不再赘述。网上有许多大牛的文章可供参考。文章到这里结束，谢谢您的浏览，有错误之处联系更正。
网友评论