Promise异步的终极武器

一、Event Loop 完整流程（六步法）

把前面散的知识收拢成一套解题流程，遇到任何输出题都按这六步走。

 
 
 
步骤①：把所有代码当第一个宏任务，整体扫一遍
 
 
 
步骤②：同步代码从上到下执行，遇到异步任务就\"登记\"不执行
 
 
 
        - 遇到 setTimeout/setInterval → 注册到 Web API，回调等会儿进宏任务队列
 
 
 
        - 遇到 new Promise(fn) → fn 同步执行
 
 
 
        - 遇到 .then/.catch/.finally → 回调进微任务队列
 
 
 
        - 遇到 await → 暂停当前 async 函数，后续代码进微任务队列
 
 
 
步骤③：同步代码全部跑完 → 当前宏任务结束
 
 
 
步骤④：清空【所有】微任务（一个一个出列执行，新产生的微任务也当场清）
 
 
 
步骤⑤：检查是否需要 UI 渲染（浏览器，了解即可）
 
 
 
步骤⑥：从宏任务队列取下一个宏任务 → 回到步骤②
 
 
 

解题口诀：先同步、后微任务、再宏任务；微任务一次清空，宏任务一次一个。

---

速记卡（面试闪卡）

Q1：一句话讲清「Promise异步的终极武器」到底是什么？

A：Promise 把回调地狱变成链式 .then，其执行靠 Event Loop 六步法——先同步、再微任务、后宏任务。

Q2：微任务 vs 宏任务 —— 怎么理解？

A：setTimeout/setInterval 是宏任务，进宏任务队列；Promise 的 .then/.catch 和 await 后面的代码是微任务，进微任务队列。微任务优先级高、一次清空，宏任务一次一个。好比急诊（微）插队普通号（宏）（microtask vs macrotask）。

Q3：Event Loop 六步法 —— 怎么理解？

A：①代码当首个宏任务扫一遍 ②同步代码从上跑、异步只”登记” ③同步跑完当前宏任务结束 ④清空全部微任务 ⑤看是否渲染 ⑥取下一个宏任务回到②。六步走完任何输出题（Event Loop six-step）。

Q4：await 的本质 —— 怎么理解？

A：await 等于”暂停当前 async 函数 + 后续代码塞进微任务”。它背后就是 Promise——await x 等价于等一个 Promise resolve。所以 await 后面的代码总在微任务里跑，晚于同步（await semantics）。

Q5：解题口诀与常见坑 —— 怎么理解？

A：口诀”先同步、后微任务、再宏任务；微任务一次清空，宏任务一次一个”。常见坑：误以为 setTimeout 一定先跑（其实排在微任务后）、误以为 Promise 构造函数里是异步（fn 同步执行）（pitfall）。

Q6：核心速记主线有哪些？

• 任务分两级：宏任务(setTimeout) 与 微任务(.then/await)

• 优先级：同步 > 微任务(一次清空) > 宏任务(一次一个)

• Event Loop 六步：同步→登记异步→清微任务→取宏任务循环

• await 即 Promise 语法糖，后续代码进微任务队列

口诀

A：Promise 串异步程，

微先宏后次序明；

同步跑完清微层，

六步轮回心不惊。

相关链接

• 📋 目录：00-JavaScript

• 📚 学习清单：八股文学习路线图