理解ES7中的async函数

什么是Async、await

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async顾名思义是“异步”的意思，用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。

基本用法

async函数的返回值

既然async函数是声明一个异步函数，那么我们如何知道这个函数是否执行完成呢。我们观察一下async函数的返回值就明白了。

async function lxcAsync() {
    return "LXC";
}

console.log(lxcAsync()); // Promise { 'LXC' }

代码输出的结果是Promise { 'LXC' }，可见async函数返回的是一个Promise对象，因此我们可以使用then方法添加回调函数，从而处理async函数返回的结果。

async function lxcAsync() {
    return "LXC";
}

lxcAsync().then((data) => {
    console.log(data);   // LXC
});

await的作用

正常情况下，await命令后面是一个 Promise 对象。当然也可以是原始类型和非Promise对象，但会被转成一个立即resolve的 Promise 对象，这是等同于同步操作。await表示函数等待promise返回结果了，再继续执行。

function delay() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('LXC');
        }, 2000);
    })
}

async function lxcAsync() {
    let de = await delay();
    console.log(de); //  2s后输出LXC
}
lxcAsync();

注意点

await关键字只能用于async函数执行上下文中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

上面便是一种错误用法，await并没有在lxcAsync函数执行上下文中，而是在setTimeout的回调函数中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

如果我们希望在某个异步函数的回调函数中使用await（如果使用过jest，应该会知道jest的异步测试就有这种需求）,我们可以使用下列方式

function lxcAsync() {
   setTimeout(async () => {
     await 1;
   },1000)
}
lxcAsync();

reject错误处理

如果await后面的Promise对象返回的是reject，那么我们需要如何处理呢？这时我们需要try-catch来处理。

function delay() {
    return new Promise((resolve, reject) => {
        reject('LXC');
    })
}

async function lxcAsync() {
    try {
        let de = await delay();
        console.log(de); 
    } catch (error) {
        console.log(error);  //输出LXC
    }

}
lxcAsync();