ES6 从零开始：掌握 Promise 的本质

前端

2024-01-05 01:47:15

告别回调地狱，拥抱 Promise

作为一名 JavaScript 初学者，你可能深受回调地狱的困扰。当代码嵌套层层回调函数时，不仅难以阅读，而且容易出错。

Promise 应运而生，它是一种处理异步操作的利器。它提供了一种优雅的方式来管理回调，避免代码的混乱和错误。

理解 Promise 的本质

Promise 是一个表示异步操作及其最终结果（成功或失败）的对象。它具有以下三个状态：

待定（Pending）： 操作尚未完成。
已解决（Resolved）： 操作已成功完成，结果可以通过 .then() 方法获取。
已拒绝（Rejected）： 操作失败，原因可以通过 .catch() 方法获取。

手动实现一个简单 Promise

虽然 JavaScript 内置了 Promise，但我们也可以手动实现一个简单的 Promise 来理解其底层工作原理：

class MyPromise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    executor(resolve, reject);
  }

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

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

  then(onFulfilled, onRejected) {
    if (this.state === "resolved") onFulfilled(this.value);
    if (this.state === "rejected") onRejected(this.reason);
  }
}

使用方法：

const promise = new MyPromise((resolve, reject) => {
  // 执行异步操作
  resolve("成功结果");
});

promise.then(
  (value) => {
    // 操作成功时的处理
  },
  (reason) => {
    // 操作失败时的处理
  }
);