手写Promise的意义：揭秘异步编程的底层逻辑

前端

2024-01-18 03:43:19

理解Promise：异步编程的基石

在JavaScript的世界中，异步编程是一门艺术，它允许程序在不阻塞主线程的情况下执行耗时的任务。Promise作为异步编程的基石，为开发者提供了一种优雅而强大的方式来处理未来的事件。

Promise的原理

简单来说，Promise表示一个潜在的未来事件，无论是成功还是失败。它提供了一个接口，允许你注册回调，这些回调将在事件完成时触发。

当一个Promise被创建时，它处于"待定"状态。一旦事件完成，它就会被标记为"已解决"或"已拒绝"。已解决的Promise会执行"then"回调，而已拒绝的Promise会执行"catch"回调。

手动编写Promise

为了更深入地理解Promise的工作原理，让我们亲自动手创建一个简单的Promise实现：

function Promise(executor) {
  this.state = "pending";
  this.value = undefined;
  this.reason = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  executor(
    (value) => {
      this.resolve(value);
    },
    (reason) => {
      this.reject(reason);
    }
  );
}

Promise.prototype.resolve = function (value) {
  if (this.state !== "pending") {
    return;
  }

  this.state = "fulfilled";
  this.value = value;
  this.onFulfilledCallbacks.forEach((callback) => {
    callback(this.value);
  });
};

Promise.prototype.reject = function (reason) {
  if (this.state !== "pending") {
    return;
  }

  this.state = "rejected";
  this.reason = reason;
  this.onRejectedCallbacks.forEach((callback) => {
    callback(this.reason);
  });
};

Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === "fulfilled") {
      resolve(onFulfilled(this.value));
    } else if (this.state === "rejected") {
      reject(onRejected(this.reason));
    } else {
      this.onFulfilledCallbacks.push(() => {
        resolve(onFulfilled(this.value));
      });
      this.onRejectedCallbacks.push(() => {
        reject(onRejected(this.reason));
      });
    }
  });
};

Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);
};