从event loop事件循环中看一道Promise基础题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言 👀

最近群里有小伙伴问到一道Promise基础的题，拿出来分享下！

我们先知悉、理解event loop事件循环中的执行机制，这道基础题其实就很好解释

event loop它的执行顺序：

1. 一开始整个脚本作为一个宏任务执行
2. 执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
3. 当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
4. 执行浏览器UI线程的渲染工作
5. 检查是否有Web Worker任务，有则执行
6. 执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。

宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。

⚠️值得注意的一点：在所有任务开始的时候，由于宏任务中包括了script，所以浏览器会先执行一个宏任务，在这个过程中你看到的延迟任务(例如setTimeout)将被放到下一轮宏任务中来执行。

题目如下

async function fn1() {
    console.log(1)
}

async function fn2() {
    console.log(2)
}

async function result() {
    await fn1()
    fn2()
    setTimeout(() => {
       console.log(3);	
    });
    Promise.resolve().then(res => console.log(4))
    console.log(5);
}

result()
console.log(6)
Promise.resolve().then(res => console.log(7))
setTimeout(() => {
    console.log(8);	
});

Expected output：1 6 2 5 7 4 8 3

图解