关于promise结合async和await执行顺序问题

来源:4-7 Promise的静态方法

断了木马牛的李淳罡

2022-01-26

setTimeout(() => console.log(4))

async function test() {
console.log(1)
await Promise.resolve()
console.log(3)
}

test()

console.log(2)
谢老师新年好,请问为什么输出 1 2 3 4

写回答

2回答

谢成

2022-01-27

这个考察的是事件循环机制Event Loop处理宏任务和微任务的理解

setTImeout是宏任务,Pormise是微任务。


async function test() {
console.log(1)
await Promise.resolve()
console.log(3)
}

test()


可以改写为:

console.log(1)

Promise.resolve.then(()=>{

console.log(3)

})

所以问题的中的代码可以改写成:

setTimeout(() => console.log(4))

console.log(1)

Promise.resolve.then(()=>{

console.log(3)

})

console.log(2)


1、首先浏览器执行js进入第一个宏任务进入主线程, 遇到 setTimeout  分发到宏任务事件队列中

2、遇到console.log(1)输出1

3、遇到Pormise,执行then 被分发到微任务事件队列中

4、遇到console.log(2)输出2

5、第一轮宏任务结束,所以执行第一轮的微任务也就是console.log(3)

6、第一轮微任务执行完毕,执行第二轮宏任务,打印setTimeout里面内容





1
1
断了木马牛的李淳罡
谢谢老师的回答,祝老师新的一年万事如意,身体健康
2022-01-27
共1条回复

谢成

2022-01-27

也可以看下这个:

链接: https://pan.baidu.com/s/10MGxpfAWLMbwFdFbL1MPSw 提取码: 3a9w

0
0

JavaScript ES(6-11)全版本语法 前端都需要的基础课

前端无门槛学习,从ES6到ES11,一套课程掌握JS最新语法

1328 学习 · 296 问题

查看课程