深入理解 async / await

一、认识async

ES7 提出的async函数，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。async函数是 Generator函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await来表示异步。

先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数

async function timeout() {
  return 'hello world';
}
复制代码

二、语法

async 函数返回一个 Promise 对象

async 函数内部 return 返回的值。会成为 then 方法回调函数的参数。

async function timeout() {
   return 'hello world';
}

timeout().then((v) => {
   console.log(v)
})

复制代码

如果 async 函数内部抛出异常，则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。

async function e(){
   throw new Error('error');
}
e().then(v => console.log(v))
.catch( e => console.log(e));
复制代码

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变

也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return 'done';
}

f().then(v => console.log(v)); // 等待6s后才输出 'done'
复制代码

正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve的Promise 如下面这个例子：

async function  f() {
    return await 1
};
f().then( (v) => console.log(v)) // 1
复制代码

三、Async 函数的错误处理

先来看下面的例子：

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // 这段 await 并没有执行
}
f().then(v => console.log(a));
复制代码

当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。解决办法：可以添加 try/catch。

// 正确的写法
let a;
async function correct() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}
correct().then(v => console.log(a)); 
复制代码

参考文章

理解 async/await

用 async/await 来处理异步