search

zlx362211854 / daily-study

每日一个知识点总结，以issue的形式体现
10 stars 6 forks source link

6.setTimeout、Promise、Async/Await 的区别 #23

Open roxy0724 opened 5 years ago

zlx362211854 commented 5 years ago

在浏览器环境中，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

goldEli commented 5 years ago
  1. Promise、Async/Await 属于 JavaScript 自身拥有的 API, setTimeout是 Javascript 宿主环境提供的 API（如浏览器或Node.js）
  2. setTimeout 用来延时执行代码；Promise 用来解决回调地狱（Callback hell），采用链式调用的方式更为直观；如果觉得链式调用还不够直观，Async/Await 可用同步代码的方式写异步代码。
  3. setTimeout，Promise、Async/Await 都可以实现异步编程，setTimeout将回调推入任务队列（Task queue），而 Promise和Async/Await 将回调推入微任务队列(MicroTask queue)。
roxy0724 commented 5 years ago

setTimeout为MacroTask宏任务，Promise，Async/Await为MicroTask微任务。

执行顺序如下图 image