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 点颗⭐吧
