Promise 与 Event Loop：拨开迷雾见本质（一）

前端

2023-11-01 01:03:36

深入剖析Promise与Event Loop：JavaScript异步编程的基石

在JavaScript的世界里，Promise和Event Loop是异步编程的两个基石。了解它们的运作机制至关重要，可以帮助我们编写出高效、响应迅速的应用程序。

什么是Promise？

Promise本质上是一种对象，用于处理异步操作。它表示一个将来的值，可能是成功的也可能是失败的。Promise具有三种状态：

Pending： 异步操作正在进行中。
Fulfilled： 异步操作已成功完成。
Rejected： 异步操作已失败。

Event Loop如何工作？

Event Loop是一个不断循环的机制，负责管理JavaScript代码的执行。它不断检查事件队列中的事件，这些事件可以由用户交互、网络请求或其他异步操作触发。当Event Loop发现一个事件时，它会执行与该事件关联的事件处理函数。

Event Loop的运作分为三个步骤：

执行事件队列： 处理所有待处理的事件。
执行宏任务队列： 执行队列中的宏任务，如超时和setInterval。
执行微任务队列： 执行队列中的微任务，如Promise回调函数。

Promise与Event Loop的关系

当一个Promise创建时，它会被添加到事件队列中。当Event Loop到达该Promise时，它会检查其状态。如果Promise已fulfilled或rejected，则其回调函数会添加到微任务队列中。如果Promise仍为pending，它将继续留在事件队列中，等待异步操作完成。

微任务队列在宏任务队列之前执行，这意味着Promise的回调函数会在所有宏任务执行之前被调用。这确保了异步操作的执行顺序不会被其他任务中断。

代码示例

// 创建一个Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作已完成！");
  }, 2000);
});

// 添加一个回调函数到Promise
promise.then((result) => {
  console.log(result);
});

// 添加一个宏任务
setTimeout(() => {
  console.log("宏任务已完成！");
}, 3000);