JavaScript 教程：深入理解微任务队列（Microtask Queue）

戴艺音

于 2025-06-04 09:06:24 发布

阅读量310

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00074/article/details/148416560

JavaScript 教程：深入理解微任务队列（Microtask Queue）

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

在现代 JavaScript 开发中，Promise 已成为处理异步操作的核心工具。然而，很多开发者在使用 Promise 时，对其执行顺序机制感到困惑。本文将深入探讨 JavaScript 中的微任务队列机制，帮助你彻底理解 Promise 处理程序的执行时机。

Promise 处理程序的异步特性

让我们从一个基本示例开始：

let promise = Promise.resolve();

promise.then(() => console.log("promise done!"));

console.log("code finished");

运行结果会先显示"code finished"，然后才是"promise done"。这个现象说明，即使 Promise 立即被解决（resolved），其 .then 处理程序也不会同步执行。

微任务队列揭秘

JavaScript 引擎内部维护着一个特殊的队列——微任务队列（Microtask Queue），也称为 PromiseJobs 队列。这是 Promise 处理程序执行的关键机制：

队列特性：先进先出（FIFO），先进入队列的任务会先执行
执行时机：只有当调用栈（call stack）完全清空后，引擎才会处理微任务队列
优先级：微任务队列具有比常规任务（如 setTimeout）更高的优先级

执行顺序控制

理解微任务队列后，我们可以更好地控制代码执行顺序。如果需要确保某些代码在 Promise 处理后执行，可以将其放入 .then 链中：

Promise.resolve()
  .then(() => console.log("promise done!"))
  .then(() => console.log("code finished"));

这种写法确保了执行顺序完全符合预期。

未处理拒绝（Unhandled Rejection）的机制

微任务队列还解释了未处理 Promise 拒绝的行为：

当一个 Promise 被拒绝且没有对应的 .catch 处理程序时
引擎会在微任务队列处理完毕后检查未处理的拒绝
如果此时仍未处理，则会触发 unhandledrejection 事件

let promise = Promise.reject(new Error("Promise Failed!"));

// 稍后添加 catch 处理
setTimeout(() => promise.catch(err => console.log('caught')), 1000);

// 仍然会触发 unhandledrejection
window.addEventListener('unhandledrejection', event => console.log(event.reason));

在这个例子中，unhandledrejection 会在微任务队列处理完毕后立即触发，而 setTimeout 中的 .catch 要等到下一个事件循环才会执行，因此无法阻止未处理拒绝事件的触发。