共计 1675 个字符，预计需要花费 5 分钟才能阅读完成。
async await 本身就是 promise + generator 的语法糖。
本文主要讲述以下内容
async awiat 实质
async await 主要特性
async await 实质
下面使用 promise + generate 实现 async await
// 转换目标 async1
// async function async1() {
// console.log(‘async1 start’);
// await async2();
// console.log(‘async1 end’);
// }
function async1() {
// 将 async 转换成 *，将 awiat 转换成 yield
var awaitInstance = (function* () {
console.log(‘async1 start’);
yield async2();
console.log(‘async1 end’);
})()
// 自动执行 await 及后续代码
// 简单起见，不处理异常情况
function step() {
var next = awaitInstance.next();
// 使用 Promise 获取 异步 / 同步 方法的结果，再执行下一步
Promise.resolve(next.value).then(function (val) {
if (!next.done) step();
})
}
step();
// 返回 Promise
return Promise.resolve(undefined);
}
async await 特性
async 一定会返回 promise
// 案例 1：不设置 return
async function fn() {}
fn().then(alert); // alert -> undefined
// 案例 2：return 非 promise
async function f() {
return 1
}
f().then(alert); // alert -> 1
// 案例 3：return Promise
async function fn() {
return Promise.resolve(2);
}
fn().then(alert); // alert -> 2
async 中代码是直接执行的（同步任务）
console.log(1);
async function fn() {
console.log(2);
await console.log(3)
console.log(4)
}
fn();
console.log(5);
// 打印 1 2 3 5 4
// 为何后面是 3 5 4 ? 往下看
await 是直接执行的，而 await 后面的代码是 microtask。
async function async1() {
console.log(‘async1 start’);
await async2();
console.log(‘async1 end’);
}
// 类似于
async function async1() {
console.log(‘async1 start’);
Promise.resolve(async2()).then(() => {
console.log(‘async1 end’);
})
}
await 后面代码会等 await 内部代码全部完成后再执行
async function async1() {
console.log(‘async1 start’);
await async2();
console.log(‘async1 end’);
}
async function async2() {
return new Promise(function(resolve) {
setTimeout(function() {
console.log(‘sleep 2s’);
resolve(‘do’);
}, 2000)
})
}
async1();
// 打印结果
// async1 start -> sleep 2s -> async1 end
await 操作符用于等待一个 Promise 对象。它只能在异步函数 async function 中使用。参考 MDN
附：
在 chrome 版本 73.0.3683.86（64 位）中,
await 是可以直接使用的。
var x = await console.log(1)
End
持续更新中 来 Github 点颗⭐吧
