理解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();