手写 Promise

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

promise 是 JavaScript 中的一种异步编程解决方案，它可以让我们更好地处理异步操作，避免回调地狱的问题。

promise 的原理是通过一个对象来代表异步操作的状态，这个对象有三种状态：pending（等待）、fulfilled（已完成）和 rejected（已失败）。

当一个 promise 对象被创建时，它的状态为 pending。当异步操作完成时，promise 的状态会变为 fulfilled，并会执行相应的回调函数；如果异步操作失败，promise 的状态会变为 rejected，并会执行相应的回调函数。

在 JavaScript 中，我们可以使用 Promise 构造函数来创建 promise 对象。这个构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject，它们分别用于改变 promise 的状态为 fulfilled 和 rejected。

例如，我们可以这样写代码：

Copy code
function someAsyncFunction() {
  return new Promise(function(resolve, reject) {
    // 在这里执行异步操作
    if (/* 异步操作成功 */) {
      // 如果异步操作成功，改变 promise 的状态为 fulfilled
      resolve(/* 异步操作的结果 */);
    } else {
      // 如果异步操作失败，改变 promise 的状态为 rejected
      reject(new Error("The async operation failed"));
    }
  });
}

虽然 JavaScript 已经有了内置的 Promise 类来实现 promise，但我们也可以自己实现一个 promise。

首先，我们需要定义一个类来表示 promise，这个类应该有一个构造函数，接受一个函数作为参数，这个函数有两个参数：resolve 和 reject，它们分别用于改变 promise 的状态为 fulfilled 和 rejected。

然后，我们可以在这个类中定义一些方法，用于处理异步操作的结果。例如，我们可以定义 .then() 方法，用于处理异步操作成功的回调函数；也可以定义 .catch() 方法，用于处理异步操作失败的回调函数。

例如，我们可以这样写代码：

class MyPromise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.callbacks = [];

    const resolve = value => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;

        for (const callback of this.callbacks) {
          callback.onFulfilled(value);
        }
      }
    };

    const reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.value = reason;

        for (const callback of this.callbacks) {
          callback.onRejected(reason);
        }
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== "function") {
      onFulfilled = value => value;
    }

    if (typeof onRejected !== "function") {
      onRejected = reason => {
        throw reason;
      };
    }
}