Promises 从入门到进阶：在 Event Loop 中解读执行顺序

2024-02-06 13:27:00

前言

在现代前端开发中，异步编程的概念如影随形。作为一名合格的前端开发者，我们需要熟练掌握异步编程技术，而 Promise 便是其中不可或缺的利器。Promise 为我们提供了简洁、优雅的方式来处理异步操作，让我们能够轻松驾驭并发编程的复杂性。

在本文中，我们将深入探讨 Promise 的工作原理，并揭秘其在 Event Loop 中的执行顺序。通过深入浅出的讲解和生动形象的示例，您将对 Promise 有一个全面而深入的认识。无论您是初学者还是经验丰富的开发者，都能从本文中受益匪浅。

理解 Promise

Promise 是 JavaScript 中的一个对象，它代表着一个异步操作的最终结果。这个结果可能是成功的，也可能是失败的。Promise 提供了一个统一的接口来处理异步操作，让我们能够以同步的方式编写异步代码。

创建 Promise 的过程非常简单，只需使用 new Promise() 构造函数即可。在构造函数中，我们需要传入一个函数，这个函数称为 executor。executor 函数有两个参数，分别是 resolve 和 reject。resolve 函数用于表示异步操作成功完成，reject 函数用于表示异步操作失败。

以下是一个创建 Promise 的简单示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

在这个示例中，我们创建了一个 Promise 对象，并传入了一个 executor 函数。executor 函数中，我们使用 setTimeout() 函数模拟了一个异步操作。当这个异步操作完成时，我们调用 resolve() 函数，表示操作成功完成。

Promise 的状态

每个 Promise 都具有三个状态：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled： 表示异步操作成功完成。
Rejected： 表示异步操作失败。

一旦 Promise 的状态发生改变，它将无法再改变。如果 Promise 被 Fulfilled，则它将永远保持 Fulfilled 状态；如果 Promise 被 Rejected，则它将永远保持 Rejected 状态。

then() 方法

Promise 提供了一个 then() 方法，用于处理异步操作的结果。then() 方法接受两个函数作为参数，这两个函数分别用于处理 Fulfilled 状态和 Rejected 状态。

以下是一个使用 then() 方法处理 Promise 结果的示例：

promise.then(
  (result) => {
    console.log(result); // 输出：Hello, world!
  },
  (error) => {
    console.error(error); // 输出：An error occurred!
  }
);

在这个示例中，我们使用 then() 方法处理 Promise 的结果。如果 Promise 被 Fulfilled，则会调用第一个函数并输出结果；如果 Promise 被 Rejected，则会调用第二个函数并输出错误信息。

链式调用

Promise 还支持链式调用。这意味着我们可以将多个 Promise 串联起来，以便在一个 Promise 完成后立即执行另一个 Promise。

以下是一个使用链式调用处理多个 Promise 的示例：

promise1
  .then((result1) => {
    return promise2(result1);
  })
  .then((result2) => {
    return promise3(result2);
  })
  .then((result3) => {
    console.log(result3); // 输出：最终结果
  });

在这个示例中，我们使用链式调用将三个 Promise 串联起来。当第一个 Promise 完成后，我们使用 then() 方法返回第二个 Promise。当第二个 Promise 完成后，我们使用 then() 方法返回第三个 Promise。当第三个 Promise 完成后，我们输出最终结果。