化繁为简：从零开始创建 JavaScript Promise

在 JavaScript 的广袤领域中，Promise 扮演着至关重要的角色，它巧妙地管理着异步操作，确保代码执行的有序性和可预测性。然而，对于初学者来说，理解 Promise 的内在机制可能就像在迷雾中航行。为了拨开迷雾，让我们踏上一段启蒙之旅，从头开始创建自己的 JavaScript Promise。

初识 Promise

Promise 本质上是一个对象，它代表了某个异步操作的最终结果。这个结果可能是成功的（即已完成），也可能是失败的（即被拒绝）。Promise 赋予我们控制异步操作及其结果的能力，让我们可以优雅地处理各种情况。

创建 Promise

创建 Promise 就像演奏交响曲，需要一丝不苟。第一步是编写一个回调函数，该函数负责定义 Promise 的行为。它接受两个参数：

• resolve：当操作成功完成时调用。它接收成功结果并解决 Promise。
• reject：当操作失败时调用。它接收失败原因并拒绝 Promise。

然后，我们使用 new Promise 语法创建一个新的 Promise，传递回调函数作为参数。例如：

const promise = new Promise((resolve, reject) => {
  // 定义 Promise 的行为
});

解决或拒绝 Promise

一旦我们有了 Promise，就需要根据操作的结果解决或拒绝它。通过调用 resolve() 或 reject() 函数，我们可以通知 Promise 结果。

if (operationSucceeded) {
  promise.resolve(result);
} else {
  promise.reject(error);
}

消费 Promise

创建并解决 Promise 只是故事的一半。为了利用其异步优势，我们需要消费 Promise。我们使用 then() 和 catch() 方法，分别处理成功和失败的情况。

promise
  .then((result) => {
    // 处理成功结果
  })
  .catch((error) => {
    // 处理失败原因
  });

实战演练：获取用户详细信息

为了巩固我们的理解，让我们用一个实际示例来创建 Promise。假设我们想要从服务器获取用户详细信息。我们可以使用以下步骤：

1. 创建一个 getUserDetails() 函数，该函数返回一个 Promise。
2. 在 Promise 回调中，使用 fetch() 发出异步请求。
3. 如果请求成功，使用 resolve() 解决 Promise，传递获取的用户信息。
4. 如果请求失败，使用 reject() 拒绝 Promise，传递错误消息。

const getUserDetails = () => {
  return new Promise((resolve, reject) => {
    fetch("https://example.com/user-details")
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Failed to fetch user details");
      })
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
};

现在，我们可以轻松地消费 getUserDetails() Promise 来获取用户详细信息：

getUserDetails()
  .then((userDetails) => {
    console.log(userDetails);
  })
  .catch((error) => {
    console.error(error);
  });

创造性的思考：非同步代码的优雅编排

创建自己的 Promise 不仅是一种技巧，更是一种思考方式。它教会我们以一种非同步和结构化的方式思考代码。通过将异步操作封装到 Promise 中，我们可以轻松管理依赖关系、错误处理和代码的可读性。

---