理解async/await

发表于 分类于 阅读次数：

作用

在async/await之前，我们有三种方式写异步代码：

  • 嵌套回调

  • 以Promise为主的链式回调

  • 使用Generators

但是，这三种写起来都不够优雅，ES7做了优化改进，async/await应运而生。
async/await相比较Promise 对象，then 函数的嵌套，与 Generator 执行的繁琐（需要借助co才能自动执行，否则得手动调用next() ）。

async/await 可以让你轻松写出同步风格的代码同时又拥有异步机制，更加简洁，逻辑更加清晰。

特点

  1. async/await更加语义化，async 是“异步”的简写，async function 用于申明一个 function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；

  2. async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）

  3. 可以通过多层 async function 的同步写法代替传统的callback嵌套。

async function语法

  • 自动将常规函数转换成Promise，返回值也是一个Promise对象；

  • 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数；

  • 异步函数内部可以使用await。

await语法

  • await 放置在Promise调用之前，await 强制后面点代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果；

  • await只能在async函数内部使用，用在普通函数里就会报错。

具体使用

async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法。

首先看一个简单场景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//假设有4个异步方法要按顺序调用
new Promise(function(resolve){
    ajaxA("xxxx", ()=> { resolve(); })    
}).then(function(){
    return new Promise(function(resolve){
        ajaxB("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    return new Promise(function(resolve){
        ajaxC("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    ajaxD("xxxx");
});

语法上不够简洁, 我们可以稍微改造一下

1
2
3
4
5
6
7
8
9
10
//将请求改造成一个通用函数
function request(options) {
    //.....
    return new Promise(....); //使用Promise执行请求,并返回Promise对象
}
//于是我们就可以来发送请求了
request("http://xxxxxx")
.then((data)=>{
    //处理data
})

然后我们再来重新改造开头的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
request("ajaxA")
.then((data)=>{
   //处理data
   return request("ajaxB")
})
.then((data)=>{
   //处理data
   return request("ajaxC")
})
.then((data)=>{
   //处理data
   return request("ajaxD")
})

比起之前有了不小的进步, 但是看上去依然不够简洁

如果我能像使用同步代码那样, 使用Promise就好了

于是, async\await出现了

1
2
3
4
5
6
7
8
9
10
async function load(){
    await request("ajaxA");
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}

await关键字使用的要求非常简单, 后面调用的函数要返回一个Promise对象；
load()这个函数已经不再是普通函数, 它出现了await这样"阻塞式"的操作；
因此async关键字在这是不能省略的。

到这你已经学会了async和await基本使用方式。

下面来简单解释一下它的工作流程：

1
2
3
4
5
6
7
//wait这个单词是等待的意思
async function load(){
    await request("ajaxA");  //那么这里就是在等待ajaxA请求的完成
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}

如果后一个请求需要前一个请求的结果怎么办呢?

传统的写法是这样的：

1
2
3
4
5
6
7
8
9
10
request("ajaxA")
.then((data1)=>{
   return request("ajaxB", data1);
})
.then((data2)=>{
   return request("ajaxC", data2)
})
.then((data3)=>{
   return request("ajaxD", data3)
})

而使用async/await是这样的：

1
2
3
4
5
6
7
async function load(){
    let data1 = await request("ajaxA");  
    let data2 = await request("ajaxB", data1);
    let data3 = await request("ajaxC", data2);
    let data4 = await request("ajaxD", data3);
    //await不仅等待Promise完成, 而且还拿到了resolve方法的参数
}

注意当一个函数被async修饰以后, 它的返回值会被自动处理成Promise对象

关于异常处理

1
2
3
4
5
6
7
8
9
10
async function load(){
    //请求失败后的处理, 可以使用try-catch来进行
    try{
        let data1 = await request("ajaxA");  
        let data2 = await request("ajaxB", data1);
        let data3 = await request("ajaxC", data2);
    } catch(e){
        //......
    }
}