彻底搞懂 Promise （手写源码并多注释）

在 JavaScript 异步编程中，Promise 是一个非常重要的概念和工具。它为我们处理异步操作提供了一种更加优雅和可控的方式。下面我们将通过手写源码并添加大量注释的方式来彻底搞懂 Promise。

让我们来定义一下 Promise 的基本结构。

function MyPromise(executor) {
  // 定义 Promise 的状态
  this.state = 'pending';
  // 存储成功时的回调函数
  this.onResolvedCallbacks = [];
  // 存储失败时的回调函数
  this.onRejectedCallbacks = [];

  // 定义 resolve 函数
  const resolve = value => {
    if (this.state === 'pending') {
      this.state ='resolved';
      this.value = value;
      this.onResolvedCallbacks.forEach(callback => callback(value));
    }
  };

  // 定义 reject 函数
  const reject = reason => {
    if (this.state === 'pending') {
      this.state ='rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(callback => callback(reason));
    }
  };

  // 执行传入的执行器函数
  executor(resolve, reject);
}

在上述代码中，我们定义了 MyPromise 函数，它接受一个执行器函数 executor 作为参数。在执行器函数中，会传入 resolve 和 reject 两个函数，用于改变 Promise 的状态和传递结果。

接下来，我们为 MyPromise 实例添加 then 方法。

MyPromise.prototype.then = function(onResolved, onRejected) {
  if (this.state ==='resolved') {
    onResolved(this.value);
  } else if (this.state ==='rejected') {
    onRejected(this.reason);
  } else {
    this.onResolvedCallbacks.push(onResolved);
    this.onRejectedCallbacks.push(onRejected);
  }
};

通过 then 方法，我们可以根据 Promise 的状态来执行相应的回调函数。

通过手写这样的源码并添加详细注释，我们能够更深入地理解 Promise 的工作原理和内部机制。无论是处理异步数据获取、顺序执行异步操作，还是进行错误处理，Promise 都提供了强大而可靠的支持。

希望通过这篇文章对 Promise 的剖析，能让您在 JavaScript 异步编程中更加得心应手，写出更加高效和可靠的代码。