js同步任务，宏任务，微任务 await promise setTimeout

最新推荐文章于 2024-10-09 09:23:21 发布

原创

最新推荐文章于 2024-10-09 09:23:21 发布 · 697 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文深入探讨JavaScript中的异步执行机制，重点讲解宏任务和微任务的区别及其执行顺序。通过示例代码分析了async/await、Promise、setTimeout的执行流程，帮助理解JavaScript事件循环的工作原理。

记录一下小问题，关于微任务和宏任务

async function async1 () {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2 () {
  console.log('async2')
}
console.log('script start')
setTimeout(function () {
  console.log('setTimeout')
}, 0)
async1()
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')

输出：

Why and How？
在js中，首先执行的是同步代码，遇到异步代码是先不管的。而异步代码里，分为宏任务和微任务，这两个任务是两个队列，所以是先进先出的
什么算宏任务？
SetTimeout
什么算微任务？
async/await、promise
这里需要注意的是，promise里的then才会被加入微任务，他的resolve，是同步里的。
而async函数里遇到await之前的代码是同步里的，遇到await时，会执行await后面的函数，然后返回一个promise，把await下面的代码放入微任务，并且退出这个async函数。
所以这里的执行顺序就变成：