-
async
函数在抛出返回值时,会根据返回值类型开启不同数目的微任务-
return结果值:非
thenable
、非promise
(不等待) -
return结果值:
thenable
(等待 1个then
的时间) -
return结果值:
promise
(等待 2个then
的时间)
-
await
右值类型区别-
接非
thenable
类型,会立即向微任务队列添加一个微任务then
,但不需等待 -
接
thenable
类型,需要等待一个then
的时间之后执行 -
接
Promise
类型(有确定的返回值),会立即向微任务队列添加一个微任务then
,但不需等待-
TC 39 对
await
后面是promise
的情况如何处理进行了一次修改,移除了额外的两个微任务,在早期版本,依然会等待两个then
的时间
-
-
例1:
async function async2 () {
new Promise((resolve, reject) => {
resolve()
})
}
async function async3 () {
return new Promise((resolve, reject) => {
resolve()
})
}
async function async4 () {
return {
then (cb) {
cb();
}
}
}
async function async1 () {
// 方式一:最终结果:B A C D
// await new Promise((resolve, reject) => {
// resolve()
// })
// 方式二:最终结果:B A C D
// await async2()
// 方式三:最终结果:B C D A
// await async3()
// 方式四:最终结果:B C D A
await async4()
console.log('A')
}
async1()
new Promise((resolve) => {
console.log('B')
resolve()
}).then(() => {
console.log('C')
}).then(() => {
console.log('D')
})
解析:
-
方式一:
await
的是Promise
,无需等待 -
方式二:
await
的是async
函数,但是该函数的返回值本身是**非thenable
**,无需等待 -
方式三:
await
的是async
函数,且返回值本身是Promise
,需等待两个then
时间 -
方式四:
await
的是async
函数,且返回值本身是thenable
类型,需等待1个then
时间
例2(经典面试题):
async function async1 () {
console.log('1')
await async2()
console.log('AAA')
}
async function async2 () {
console.log('3')
return new Promise((resolve, reject) => {
resolve()
console.log('4')
})
}
console.log('5')
setTimeout(() => {
console.log('6')
}, 0);
async1()
new Promise((resolve) => {
console.log('7')
resolve()
}).then(() => {
console.log('8')
}).then(() => {
console.log('9')
}).then(() => {
console.log('10')
})
console.log('11')
// 最终结果👉: 5 1 3 4 7 11 8 9 AAA 10 6