剖析事件循环中的 Promise 执行顺序

2024-01-12 20:19:26

引子
JavaScript 中的事件循环是程序运行的基石。它负责调度各种任务，包括网络请求、定时器、用户交互事件和 Promise 回调等。事件循环根据任务的优先级和类型，将它们按照一定的顺序执行。理解事件循环的运行机制对于 JavaScript 开发人员至关重要。掌握事件循环，不仅有助于您理解代码的执行流程，还能够帮助您避免常见的问题和编写出更健壮、更高效的代码。

事件循环与 Promise
Promise 是 JavaScript 中的异步编程利器，它允许您编写更简洁、更易读的代码。Promise 的核心思想是将异步操作封装成一个对象，并提供 then() 方法来处理异步操作的结果。事件循环在 Promise 的执行过程中发挥着关键作用。它负责调度 Promise 的回调函数，并确保它们在正确的时机被执行。

Promise 的执行顺序
Promise 的执行顺序与事件循环的运行机制密切相关。Promise 回调函数的执行顺序主要取决于以下几个因素：

Promise 的状态：Promise 有三种状态：pending（等待）、fulfilled（已完成）和 rejected（已拒绝）。处于 pending 状态的 Promise 不会执行回调函数。只有当 Promise 变为 fulfilled 或 rejected 状态时，才会执行相应的回调函数。
回调函数的类型：Promise 提供 then() 和 catch() 方法来处理异步操作的结果。then() 方法用于处理 fulfilled 状态的 Promise，而 catch() 方法用于处理 rejected 状态的 Promise。
事件循环的阶段：事件循环分为多个阶段，包括任务队列、微任务队列和事件队列等。任务队列中的任务优先级最高，其次是微任务队列，然后是事件队列。

常见的误解
对于 Promise 的执行顺序，存在一些常见的误解。以下是一些常见的误区：

Promise 的回调函数总是在主线程中执行。
Promise 的回调函数总是按照创建的顺序执行。
Promise 的回调函数总是按照 then() 和 catch() 方法调用的顺序执行。

剖析代码示例
为了更好地理解 Promise 的执行顺序，我们来看一个代码示例：

console.log('①：主线程开始');
new Promise((resolve) => {
  console.log('②：Promise 实例化');
  resolve();
}).then(() => {
  console.log('③：第一个 then() 回调');
}).then(() => {
  console.log('④：第二个 then() 回调');
}).then(() => {
  setTimeout(() => {
    console.log('⑥：定时器回调');
  }, 0);
}).then(() => {
  console.log('⑦：第三个 then() 回调');
});
console.log('⑧：主线程结束');