前端面试题——宏任务微任务async,await

本题目主要涉及宏任务微任务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

答案:

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

解读:

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执行的问题,写完会贴上来,大家也可以去主页翻翻

感谢阅读

祝更好,

拜拜!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容