在前端编程中，经常会遇到异步处理，今天小编为大家简单讲解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 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

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