JavaScript教程：深入理解微任务队列机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00418/article/details/148940283

JavaScript教程：深入理解微任务队列机制

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

引言

在现代JavaScript开发中，Promise已成为处理异步操作的核心工具。但你是否曾好奇为什么.then()回调总是"稍后"执行？本文将深入探讨JavaScript引擎内部的微任务队列机制，揭示Promise异步执行的底层原理。

微任务队列的基本概念

当Promise状态改变时，其相关的.then、.catch或.finally处理器不会立即执行，而是被放入一个特殊的队列——微任务队列（Microtask Queue）。

let promise = Promise.resolve();

promise.then(() => console.log("Promise完成！"));

console.log("代码结束"); // 先输出

在这个例子中，"代码结束"会先于"Promise完成！"输出，即使Promise已经是解决状态。

微任务队列的工作原理

执行时机

微任务队列具有以下关键特性：

先进先出（FIFO）：先进入队列的任务会先执行
当前执行栈清空后：只有当JavaScript引擎完成当前同步代码执行后，才会开始处理微任务队列

可视化流程

[主线程代码]
   ↓
[执行栈清空]
   ↓
[检查微任务队列]
   ↓
[执行所有微任务]
   ↓
[继续事件循环]

控制执行顺序的技巧

如果需要确保某些代码在Promise处理器之后执行，可以将其放入.then()链中：

Promise.resolve()
  .then(() => console.log("第一个任务"))
  .then(() => console.log("第二个任务"));

未处理拒绝的检测机制

JavaScript引擎通过微任务队列来检测未处理的Promise拒绝：

当微任务队列处理完毕时
引擎检查是否存在被拒绝但未被处理的Promise
如果发现，则触发unhandledrejection事件

let rejectedPromise = Promise.reject(new Error("出错了！"));

// 没有.catch处理器
window.addEventListener('unhandledrejection', event => {
  console.log('捕获到未处理的拒绝:', event.reason);
});

延迟处理的特殊情况

如果使用setTimeout延迟添加错误处理器：

let lateHandled = Promise.reject(new Error("延迟处理"));

setTimeout(() => {
  lateHandled.catch(e => console.log('最终捕获:', e));
}, 1000);

// 仍然会先触发unhandledrejection

这是因为微任务队列处理时还没有错误处理器，引擎会认为这是一个未处理的拒绝。