DIY Promise：自定义 Promise 的灵魂之旅

2023-02-13 19:06:31

揭开自定义 Promise 的神秘面纱：踏上创造之旅

在 JavaScript 的广阔世界里，Promise 扮演着至关重要的角色，它能让你处理异步操作就像处理同步代码一样轻松。然而，如果你想要深入了解 Promise 的内部运作机制，自定义 Promise 将为你打开一扇通往新奇世界的窗户。在这段充满挑战但又激动人心的旅程中，我们将共同探索构建自己的 Promise 的每一步，揭开它令人着迷的秘密。

构建 Promise 的基石：骨架

要打造一个自定义 Promise，我们需要从一个骨架开始，即一个构造函数。这个构造函数将接收一个执行器函数作为参数，它负责执行异步操作并最终将 Promise 的状态变为已完成或已拒绝。

function MyPromise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.thenCallbacks = [];
  this.catchCallbacks = [];

  executor(this.resolve.bind(this), this.reject.bind(this));
}

揭秘 Promise 的核心方法

1. resolve：点亮已完成之光

当异步操作顺利完成后，我们需要调用 resolve 方法，将 Promise 的状态变为已完成，并传递操作结果作为参数。

MyPromise.prototype.resolve = function(result) {
  if (this.state !== 'pending') {
    return;
  }

  this.state = 'fulfilled';
  this.result = result;
  this.thenCallbacks.forEach(callback => callback(this.result));
};

2. reject：直面拒绝的挑战

如果异步操作遭遇挫折，我们需要调用 reject 方法，将 Promise 的状态变为已拒绝，并传递失败原因作为参数。

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

  this.state = 'rejected';
  this.result = reason;
  this.catchCallbacks.forEach(callback => callback(this.result));
};

3. then：添加回调，静候结果

then 方法允许我们在 Promise 完成或拒绝时添加回调函数。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  if (this.state === 'fulfilled') {
    onFulfilled(this.result);
  } else if (this.state === 'rejected') {
    onRejected(this.result);
  } else {
    this.thenCallbacks.push(onFulfilled);
    this.catchCallbacks.push(onRejected);
  }

  return new MyPromise((resolve, reject) => {
    onFulfilled = onFulfilled || function(result) { resolve(result); };
    onRejected = onRejected || function(reason) { reject(reason); };
  });
};

4. catch：捕捉失败，化危为机

catch 方法允许我们在 Promise 拒绝时添加失败回调函数。

MyPromise.prototype.catch = function(onRejected) {
  this.catchCallbacks.push(onRejected);

  return new MyPromise((resolve, reject) => {
    onRejected = onRejected || function(reason) { reject(reason); };
  });
};