手写 Promise：剖析并实践

2023-12-18 20:09:20

在充满活力的 JavaScript 生态系统中，Promise 作为一种用于异步编程的强大工具，已成为现代开发的基石。它使我们能够优雅地处理异步操作，并以一种可控且可读的方式管理回调。

然而，真正理解 Promise 的内部运作方式对于充分利用其优势至关重要。在这篇文章中，我们将踏上一个手写 Promise 的探索之旅，从头开始构建它，逐层揭开它的奥秘。

搭建 Promise 的骨架

我们从 Promise 的基本框架开始。一个 Promise 本质上是一个对象，拥有两个至关重要的属性：state 和 result。state 属性表示 Promise 的当前状态，可以是“pending”（等待）、“fulfilled”（已完成）或“rejected”（已拒绝）。result 属性存储着 Promise 兑现或拒绝的值。

const promise = new Promise((resolve, reject) => {});

异步执行：让 Promise 活动起来

Promise 的魔力在于它可以与异步操作（如网络请求或文件读取）关联。当异步操作完成时，我们会使用 resolve 或 reject 函数来通知 Promise。

// 异步操作
fetch('https://example.com')
  .then(response => response.json())
  .then(data => promise.resolve(data))
  .catch(error => promise.reject(error));

观察 Promise：添加回调

一旦我们启动了异步操作，就可以使用 then 方法为 Promise 添加回调。回调函数将在 Promise 兑现或拒绝时执行，并将接收相应的值或错误。

promise
  .then(result => console.log(result))
  .catch(error => console.log(error));

嵌套 Promise：处理复杂异步

对于需要处理多个异步操作的复杂场景，我们可以嵌套 Promise。每个嵌套的 Promise 都有自己的 resolve 和 reject 函数，使我们能够优雅地处理异步流程。

const promise1 = new Promise((resolve, reject) => {});
const promise2 = new Promise((resolve, reject) => {});

Promise.all([promise1, promise2])
  .then(results => {
    // 两个 Promise 都已兑现
  })
  .catch(error => {
    // 任意一个 Promise 已拒绝
  });

实际案例：编写一个简单的 Promise

为了进一步加深理解，让我们编写一个简单的 Promise 来从服务器获取数据。

const getData = () => {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

getData()
  .then(data => console.log(data))
  .catch(error => console.log(error));