JavaScript Async/Await 详解

Async/Await 是什么？

Async/Await 是编写异步程序的新方式，它实际上是基于Promise来实现的，他会让异步的代码写起来和同步代码一样

Node也已经在7.6版本开始支持Async/Await

使用方法

学习它是如何使用的，采用了什么样神奇的语法糖

在这之前，可以先看一个使用Promise的异步编程：使用axios模块异步获取一条数据

function getData(){

    return axios.get('http://data/banner')
         .then(res=>{
            return res;
          })
}

getData()

使用Async/Await是什么样呢

axync function getData(){

    let res = await axios.get('http://data/banner')

    return res

}

getData()

第一种写法采用Promise的写法，将异步的调用变成了链式的写法，让复杂的回调更加的清晰。

第二种Async/Await写法呢：

• 函数前增加关键字async,在函数体内使用await关键字，await当让也只能声明在函数体内，该函数会隐式的返回一个Promise对象，函数体内的return值，将会作为这个Promise对象 resolve 时的参数
• await axios.get()会让函数等到axios.get()返回的Promise对象resolve之后触发

使用Async/Await的优势有哪些

• 让代码更加的简约

我们上面写的代码，不用写then，不需要创建一个匿名函数来处理返回值，或者也不需要把一个数据赋给一个我们不需要的值。还避免了代码的嵌套。

• 更容易处理错误

Async/Await 最终让以同样的方式处理同步和异步的错误成为了可能，让try/catch更好的使用。

下面举个例子，使用Promise，来处理异步编程的错误捕获， 由于程序是异步的最外面一层  try/catch。他无法捕获Promise内部发生的错误，我们只能嵌套一层try/catch来解决:

function getData(){
    try{
        axios.get('http://data/banner')
            .then(res=>{
                try{
                    let json = JSON.parse(res)
                 }
                 catch(err){
                    console.log(err)
                 }
                 return json 
              })
      }
       catch(err){
            console.log(err)
        }
}  

要是使用Async/Await的异步编程是如何处理错误的：

async function getData(){
    let data;
    try{
        data = JSON.parse(await axios.get('http://data/banner'));
    }
    catch(err){
        console.log(err);
    }
    return data;
}

• 更容易处理条件判别

应用场景：先获取数据，然后通过已获得的数据来判断是否继续获取更多的详细数据

function getData(){
    return axios.get('http://data/banner').then(res=>{
        if(res&&res.data&&res.data.id){
            return axios.get('http://data/banner').then(res=>{
                return res;
            })
        }
        else{
            return res
        }
    })
}

这种写法嵌套过多，会导致很多变量的遗失，让逻辑难以处理

Async/Await编程如何处理：

async function getData(){
    let data = await axios.get('http://data/banner')
    if(data.id){
        let dataDep = await axios.get('http://data/banner')
        return datadep
    }
    else{
        return data;
    }
}

• 更容易处理中间值

场景：调用promise1,然后将它返回给promise2，最后又将两个promise的结果都返回给promise3

function getData(){
    return promise1()
        .then(value1=>{
            return promise2(value1)
                .then(value2=>{
                    return promise3(value1,value2)
                })
         })
}

使用Async/Await编写：

async function getData(){
    const value1 = await promise1()
    const value2 = await promise2(value1)
    const value3 = await promise3(value1,value2)
}

使用Async/Await也会大大方便我们的断点调试