面试题——宏任务微任务async,await执行顺序

293 阅读2分钟

本题目主要涉及宏任务微任务async,await的理解:

     async function async1() {
         console.log('async1 start')// 1
         await async2()//2
         console.log('async1 end')//3
     }
     async function async2() {
         console.log('async2')// 4
     }
     console.log('script start')//5
     setTimeout(function () {
         console.log('settimeout')//6
     })
     async1()//7
     new Promise(function (resolve) {
         console.log('promise1')//8
         resolve()//9
     }).then(function () {
         console.log('promise2')// 10
     })
     console.log('script end')// 11
答案:

屏幕截图 2022-01-09 233352.png

如果答案和你的想法有出入,希望下面的解读能帮助你解答疑惑~

解读:

1、JS先执行同步代码,5执行,输出=>script start

2、遇到setTimeout异步任务,放入任务队列等待执行,setTimeout是宏任务,如果队列有微任务,那微任务先执行(微任务>dom渲染>宏任务)

3、代码句7执行,同步执行1,输出=>async1 start

async function async1() {
         console.log('async1 start')// 1
         await async2()//2
         console.log('async1 end')//3
     }

await async2()执行,输出=>async2

4、await等待结果出来之后,代码才会继续往下执行,await语句之后的代码和Promise.then效果类似:async函数里,在await之前的代码同步执行,就像new Promise里传入的同步代码,await之后的代码,就像Promise.then的回调函数

代码句2执行后,代码句3放入队列,类似Promie任务,放入微任务

5、进入Promise代码,执行8,输出=>promise1

new Promise(function (resolve) {
     console.log('promise1')//8
     resolve()//9
 }).then(function () {
     console.log('promise2')// 10
 })
 console.log('script end')// 11

6、执行resolve,把then回调放入微任务,此时微任务有3>10

等待队列的代码:
setTimeout(function () {
  console.log('settimeout')//6
})
console.log('async1 end')//3
console.log('promise2')// 10

7、执行同步代码11,输出=>script end

8、主线程内的任务执行完毕,去任务队列读取对应的任务,微任务先执行,先进先出,3先执行,之后是10,最后执行settiimeout ,顺序输出=> async1 end、promise2、settimeout

如果有疑问或发现什么不足之处,欢迎留言~

还有一期Promise.then执行的问题,写完会贴上来,大家也可以去主页翻翻

感谢阅读

祝更好,

拜拜!