这一次彻底搞懂async await执行机制

白胡子的笑

于 2022-08-23 22:12:47 发布

阅读量389

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_67251803/article/details/126493898

版权

本文深入探讨了JavaScript中的async/await执行机制，阐述了await关键字如何确保后续代码在异步操作完成后执行，以及async函数与微任务、宏任务的关系。通过示例解释了执行顺序，展示了同步、异步任务以及微任务、宏任务的执行流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 宏任务微任务
// async + await 执行机制
async function async1(){
  console.log('async1 start') // 2
  // await 后面的函数一定是需要先执行的, 在同步任务中
  // 请求得到的结果是异步返回的
  // await 前面的返回值和下面的所有代码, 等同于是 promise 的 .then 回调函数第一个参数及内部代码
  // .then 回调函数中的代码都是异步的微任务
  // async2().then(() => {
  //   console.log('async1 end')
  // })
  await async2() 
  console.log('async1 end') // 6 微任务1
}

async function async2(){
  console.log('async2') // 3
}

console.log('script start') // 1

setTimeout(function(){ 
  console.log('setTimeout') // 8 宏任务
},0)

async1();

// new Promise 时传入一个回调函数, 这个回调函数是同步执行的, 创建 promise 对象后立即执行
new Promise(function(resolve){
  console.log('promise1')  // 4
  // resolve 表示这个 promise 成功了, 将来会执行 .then 里的第一个回调函数
  resolve();
}).then(function(){
  console.log('promise2')  // 7 微任务2
})

console.log('script end')  // 5 主线程执行完毕

// 正确答案:
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout