化繁为简，轻松理解 Promise 的本质

Promise，一个 JavaScript 中的异步编程利器，以其优雅的语法和强大的功能，征服了无数开发者的心。然而，它的内部实现却宛如一团迷雾，让许多人望而却步。

如果你也曾为 Promise 的复杂性所困扰，那么恭喜你，你找到了正确的文章。在这篇文章中，我们将从头开始构建一个简易版的 Promise，让你彻底理解 Promise 的本质。告别晦涩难懂的理论，我们用清晰的代码和生动的例子，带你一步步领略 Promise 的魅力。

Promise 的前世今生

Promise 的诞生，源于 JavaScript 异步编程的迫切需求。在早期的 JavaScript 中，我们只能通过回调函数来处理异步操作。回调函数虽然简单易用，但当异步操作层层嵌套时，就会导致可怕的“回调地狱”。

为了解决这个问题，Promise 应运而生。Promise 提供了一种更加优雅的方式来处理异步操作，它允许我们使用链式调用来组织代码，使代码更加清晰易读。

Promise 的核心概念

要理解 Promise，首先需要理解它的核心概念。Promise 有三种状态：pending（等待）、fulfilled（已完成）和 rejected（已拒绝）。

• pending：表示 Promise 还没有完成，正在等待异步操作的结果。
• fulfilled：表示 Promise 已经完成，并且成功返回了结果。
• rejected：表示 Promise 已经完成，但由于某种原因失败了。

Promise 的状态一旦确定，就无法再改变。

Promise 的实现

现在，让我们开始构建一个简易版的 Promise。为了便于理解，我们将使用最简单的方式来实现它。

首先，我们需要定义一个 Promise 构造函数。这个构造函数接受一个参数，即执行器函数（executor）。执行器函数有两个参数，分别是 resolve 和 reject。resolve 用于将 Promise 的状态从 pending 变为 fulfilled，reject 用于将 Promise 的状态从 pending 变为 rejected。

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

  const resolve = (value) => {
    if (this.state !== 'pending') return;
    this.state = 'fulfilled';
    this.value = value;
    this.onFulfilledCallbacks.forEach((callback) => callback(value));
  };

  const reject = (reason) => {
    if (this.state !== 'pending') return;
    this.state = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach((callback) => callback(reason));
  };

  executor(resolve, reject);
}

接下来，我们需要定义 then 方法。then 方法接受两个参数，分别是 onFulfilled 和 onRejected。这两个参数都是回调函数，分别用于处理 Promise 的成功和失败结果。

Promise.prototype.then = function (onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const value = onFulfilled(this.value);
          resolve(value);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const reason = onRejected(this.reason);
          resolve(reason);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const value = onFulfilled(this.value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const reason = onRejected(this.reason);
            resolve(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });
    }
  });
};

最后，我们需要定义 catch 方法。catch 方法接受一个参数，即 onRejected。这个参数是一个回调函数，用于处理 Promise 的失败结果。

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

至此，我们就完成了一个简易版的 Promise 实现。虽然这个实现还不够完整，但它已经足够让我们理解 Promise 的本质了。

Promise 的应用

Promise 的应用非常广泛，它可以用于各种异步编程场景，例如：

• AJAX 请求
• 文件读写
• 定时器
• 事件监听

Promise 的链式调用语法，使得我们可以轻松地将多个异步操作串联起来，从而实现复杂的操作流程。

结语

Promise 是 JavaScript 中的异步编程利器，它以优雅的语法和强大的功能，征服了无数开发者的心。虽然 Promise 的内部实现有些复杂，但只要理解了它的核心概念，就可以轻松地掌握它的使用。

在本文中，我们从头开始构建了一个简易版的 Promise，并介绍了它的核心概念和使用方法。希望通过这篇文章，你能对 Promise 有一个更加深入的理解。