setTimeout、Promise、Async/Await 的区别

在浏览器环境中,setTimeout属于macrotasks queue(宏任务队列),Promise、Async/Await属于microtasks queue(微任务队列)。
js事件循环,会先执行微任务队列,再执行宏任务队列。
如在浏览器中:

setTimeout(() => {
    console.log('time out')
});
new Promise((resolve) => {
    console.log(3)
    resolve()
    console.log(4)
}).then(() => {
    console.log(1)
})
// 3
// 4
// 1
// time out

会先执行promise微任务队列,再执行setTimeout的宏任务队列。
另外,我们可以手动把一个任务加入微任务执行队列中:

queueMicrotask(() => {
    console.log('queueMicrotask')    
})
new Promise((resolve) => {
    console.log(3)
    resolve()
    console.log(4)
}).then(() => {
    console.log(1)
})
// 3
// 4
// queueMicrotask
// 1

执行顺序为3-》4-》queueMicrotask-》1