【经典面试题】理解 async 与 await 执行机制

辅助知识点

1 . Task 宏任务 : js全部代码、setTimeout、setInterval、事件处理函数 。

2 . microTask 微任务 : promise 。

3 . promise 对象 ： Promise 是一种异步编程的解决方案，从他可以获得异步操作的消息。原型上有两个方法 .then 、.catch

4 . async 和 await 修饰符 ： 是 Promise 的语法糖，底层就是 Promise 和 .then 方法的回调函数。 async 本意是 异步的 ，await 是 async wait 的简写 本意是等待异步执行完成。

5 . Javascript 执行机制 ： Javascript 是一门单线程语言，由于一些任务需要耗时很久才能加载，但是其他页面有需要展示，这也就有了一种 “异步任务” 的解决方案。同步任务先执行，异步任务等待同步任务完成后执行。

6 . EventLoop 事件循环 ： 等待主线程同步代码执行完成后，开始循环运行，先检查栈尾的微任务队列，有就执行队列中的所有微任务，得到的数据放入主线程中执行，主线程任务执行完后，继续检查微任务队列，没有就查看宏任务队列，有任务就执行宏任务，得到的数据放入主线程中执行，继续检查继续检查微任务队列 。。。

题目解析

1 . 首先先执行主线程任务 打印日志 script start

2 . 继续执行 由于 setTimeout 是异步宏任务 在浏览器中执行得到结果 setTimeout 放入宏任务列队中等待

3 . 继续执行主线程任务 调用函数 async1() 打印日志 async1 start

4 . 打印完 async1 日志后, 继续执行 调用async2() 由于 async await 的底层就是 async2() .then(()=>{}) 所有async2() 中的的代码也在主线程中 打印日志 async2 。.then 中的代码在浏览器中执行得到结果 async1() end 则放入微任务队列中等待。

5 . 继续向下执行 打印日志 promise1 并且调用成功回调resolve() 也就是.then里的代码 ,由于.then里的代码是微任务，在浏览器中执行得到 promise2 ，放入微任务队列中的 async1() end 后面等待。

6 . 继续执行主线程任务 打印日志 script end

7 . 主线程任务全部执行完以后，EventLoop 将微任务队列中等待的代码， 按顺序放入主线程执行，打印日志async1() end 和 promise2 。

8 . 微任务队全部执行完以后，EventLoop 将继续将宏任务列队中等待的代码，放入主线程执行，打印日志setTimeout 。

答案：

日志打印顺序 ： 1.script start 2.async1 start 3.async2 4.promise1 5.script end 6.async1() end 7.promise2 8.setTimeout