写在前面
本文首发于公众号:【符合预期的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