如何实现自己的 Promise

2023-09-21 15:06:41

Promise 简介

Promise 是一种 JavaScript 对象，用于表示异步操作的最终完成或失败。您可以将 Promise 视为一个容器，其中包含异步操作的结果。当异步操作完成时，Promise 会被解析，并使用结果值来调用相应的回调函数。如果异步操作失败，Promise 会被拒绝，并使用错误值来调用相应的回调函数。

Promise 的好处在于，它可以帮助您更轻松地管理异步操作。您无需再手动处理回调函数，而是可以通过 Promise 来统一处理所有异步操作。这使得您的代码更加简洁和易于维护。

如何实现自己的 Promise

实现自己的 Promise 并没那么复杂。下面是一个简单的 Promise 实现：

class Promise {
  constructor(executor) {
    this.state = "pending"; // Promise 的状态，可以是 "pending"、"fulfilled" 或 "rejected"
    this.value = null; // Promise 的值，如果状态是 "fulfilled"，则为结果值；如果状态是 "rejected"，则为错误值
    this.callbacks = []; // Promise 的回调函数队列，当 Promise 的状态改变时，会依次调用这些回调函数

    // 执行器函数，用于初始化 Promise 的状态和值
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  // 将 Promise 的状态改为 "fulfilled"，并调用相应的回调函数
  resolve(value) {
    if (this.state !== "pending") {
      return;
    }

    this.state = "fulfilled";
    this.value = value;

    this.callbacks.forEach(callback => callback(this.value));
  }

  // 将 Promise 的状态改为 "rejected"，并调用相应的回调函数
  reject(error) {
    if (this.state !== "pending") {
      return;
    }

    this.state = "rejected";
    this.value = error;

    this.callbacks.forEach(callback => callback(this.value));
  }

  // 添加一个回调函数到 Promise 的回调函数队列中
  then(onFulfilled, onRejected) {
    this.callbacks.push({
      onFulfilled,
      onRejected,
    });

    // 如果 Promise 的状态已经是 "fulfilled" 或 "rejected"，则立即调用相应的回调函数
    if (this.state !== "pending") {
      setTimeout(() => {
        this.state === "fulfilled" ? onFulfilled(this.value) : onRejected(this.value);
      }, 0);
    }

    return this; // 返回 Promise 对象，以便可以链式调用
  }
}

这个 Promise 实现包含了一个构造函数和三个方法：resolve、reject 和 then。构造函数用于初始化 Promise 的状态和值，resolve 方法用于将 Promise 的状态改为 "fulfilled"，reject 方法用于将 Promise 的状态改为 "rejected"，then 方法用于添加一个回调函数到 Promise 的回调函数队列中。

如何使用自己的 Promise

要使用自己的 Promise，您可以按照以下步骤操作：

创建一个 Promise 对象。
使用 resolve 或 reject 方法来改变 Promise 的状态。
使用 then 方法来添加回调函数到 Promise 的回调函数队列中。

以下是一个使用 Promise 的示例：

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

promise.then(value => {
  console.log(value); // 输出 "Hello, world!"
});

在这个示例中，我们创建了一个 Promise 对象，并使用 setTimeout 函数模拟了一个异步操作。当异步操作完成时，我们使用 resolve 方法将 Promise 的状态改为 "fulfilled"，并使用 then 方法添加了一个回调函数到 Promise 的回调函数队列中。当 Promise 的状态改变时，回调函数就会被调用，并输出 "Hello, world!"。