Promise 的手写实现：从零开始理解观察者模式

从零打造 Promise：解开异步编程的秘密

什么是 Promise？

在 JavaScript 中，Promise 代表一个异步操作的最终结果，无论该操作是成功还是失败。它提供了一种优雅的方式来处理异步操作，避免回调函数的混乱。

手写一个 Promise

了解 Promise 的工作原理的最佳方法是从头开始构建一个。让我们分解这个手写的 Promise 实现：

• 构造函数： Promise 构造函数接受一个函数作为参数，称为执行器。执行器负责启动异步操作，并向 resolve 和 reject 函数传递结果或错误。
• resolve()： 当异步操作成功完成时调用此函数，它将 Promise 的状态更改为 "fulfilled" 并存储结果。
• reject()： 当异步操作失败时调用此函数，它将 Promise 的状态更改为 "rejected" 并存储错误。
• then()： 该方法允许我们添加一个回调函数，以便在 Promise 完成后执行。
• catch()： 该方法允许我们添加一个回调函数，以便在 Promise 失败后执行。

示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功了！');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // 输出“成功了！”
});

promise.catch((reason) => {
  console.log(reason); // 不会执行，因为 Promise 是成功的
});

观察者模式：Promise 的另一种用法

观察者模式允许对象之间进行松散耦合，以便它们可以相互通信。我们可以使用 Promise 来实现观察者模式，如下所示：

• 发布者： 提供订阅和发布方法，用于管理订阅者和分发数据。
• 订阅者： 当发布者发布数据时，被调用的回调函数。

示例：

const publisher = {
  subscribers: [],

  subscribe: (subscriber) => {
    this.subscribers.push(subscriber);
  },

  notify: (data) => {
    this.subscribers.forEach((subscriber) => subscriber(data));
  },
};

const subscriber = (data) => {
  console.log(`收到了数据：${data}`);
};

publisher.subscribe(subscriber);
publisher.notify('你好，世界！');

结论

理解 Promise 的工作原理可以显著提高你编写 JavaScript 代码的能力。它为异步编程提供了优雅的解决方案，而观察者模式是一个很好的例子，展示了 Promise 的多功能性。通过掌握这些概念，你可以构建更健壮、更可维护的应用程序。

常见问题解答

1. 什么是 Promise 的状态？

   • pending：正在执行异步操作
   • fulfilled：异步操作成功完成
   • rejected：异步操作失败

2. then() 和 catch() 之间的区别是什么？

   • then() 用于处理成功的 Promise，而 catch() 用于处理失败的 Promise。

3. 如何链式调用 Promise？

   • then() 方法返回一个新的 Promise，允许你链式调用多个 then() 和 catch() 方法。

4. 观察者模式有什么好处？

   • 它允许对象之间的松散耦合，使它们易于维护和扩展。

5. 如何使用 Promise 来实现观察者模式？

   • 发布者使用 Promise 来管理订阅者并发布数据，而订阅者使用 then() 方法来接收发布的数据。