【JS基础】从JavaScript中的for...of说起(下) - async和await

写在前面

本文首发于公众号：【符合预期的CoyPan】

在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。

【JS基础】从JavaScript中的for...of说起(上) - iterator 和 generator

在异步操作中使用iterator和generator是一件比较费劲的事情，而ES2017给我们提供了更为简便的async和await。

async和await

async

mdn上说：async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。

简单来说，如果你在一个函数前面使用了async关键字，那么这个函数就会返回一个promise。如果你返回的不是一个promise，JavaScript也会自动把这个值"包装"成Promise的resolve值。例如：

// 返回一个promise
async function aa() {
    return new Promise(resolve => {
        setTimeout(function(){
            resolve('aaaaaa');
        }, 1000);
    });
}

aa().then(res => {
    console.log(res); // 1s后输出 'aaaaaa'
});

typeof aa === 'function'; // true
Object.prototype.toString(aa) === '[object AsyncFunction]'; // true
Object.prototype.toString(aa()) === '[object Promise]'; // true



// 返回一个非promise
async function a() {
    return 1;
}
const b = a(); 
console.log(b); // Promise {<resolved>: 1}

a().then(res => {
    console.log(res); // 1
})
复制代码

当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。例如下面的例子：

async function a(){
    return bbb;
}

a()
.then(res => {
    console.log(res);
})
.catch( e => {
    console.log(e); // ReferenceError: bbb is not defined
});
复制代码

await

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promi