JavaScript 中的 Promise 是异步编程的基石，而 Promise A+ 规范则定义了 Promise 的最小核心行为。为了更深入理解它的本质，我们尝试手写一个符合 A+ 规范的 Promise，并附带 finally、all、race、allSettled、any 等常用方法。

1. Promise 的核心状态机

每一个 Promise 实例都有三种状态：

pending：初始状态，既不是成功，也不是失败。
fulfilled：操作成功完成。
rejected：操作失败。

状态一旦改变就不可逆（即只能从 pending -> fulfilled 或 pending -> rejected）。

2. 实现基础结构

我们从构造函数开始实现核心结构，包括状态管理、回调队列等。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    ... // resolve 和 reject 的定义
  }
  ...
}

其中：

executor 是传入的执行器函数。
resolve 和 reject 函数会变更状态并触发对应回调。

3. then 方法与链式调用

A+ 规范明确指出：then 必须返回一个新的 Promise，并支持异步执行。

then(onFulfilled, onRejected) {
  return new MyPromise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(x, resolve, reject);
        } catch (err) {
          reject(err);
        }
      });
    }
    ...
  });
}

这段代码展示了一个基本链式调用的实现，其中 resolvePromise 是核心的处理逻辑，确保即使返回的是另一个 Promise，也能按规范进行递归解析。

4. 错误处理与 catch

catch 方法只是 then(null, onRejected) 的语法糖

catch(onRejected) {
  return this.then(null, onRejected);
}

5. finally 的实现逻辑

finally 回调不会影响原有的值或错误，但若抛出异常，会中断链式流程。

finally(callback) {
  return this.then(
    value => MyPromise.resolve(callback()).then(() => value),
    reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  );
}

6. 静态方法实现

MyPromise.resolve：快速创建一个 resolved 状态的 Promise。
MyPromise.reject：快速创建一个 rejected 状态的 Promise。
MyPromise.all：等待所有 Promise 成功，失败则短路。
MyPromise.race：返回第一个完成的 Promise。
MyPromise.allSettled：等待所有结束，无论成功或失败。
MyPromise.any：返回第一个成功的 Promise，所有失败时抛出 AggregateError。

7. finally 中异常行为详解

如果 finally 中抛出异常，则该异常会中断原本的链式流程：

MyPromise.resolve('done')
  .finally(() => { throw new Error('Oops') })
  .then(v => console.log(v))
  .catch(err => console.error('Caught:', err.message));

// 输出
Caught: Oops

这意味着 finally 回调如果出错，是可以“覆盖”原始 resolve 的值的。

完整代码:

class MyPromise {
  constructor(executor) {
    if (typeof executor !== 'function') {
      throw new TypeError('Executor must be a function');
    }

    this.state = 'pending'; // 初始状态: pending
    this.value = undefined; // fulfilled 时的值
    this.reason = undefined; // rejected 时的原因

    this.onFulfilledCallbacks = []; // 存储成功回调
    this.onRejectedCallbacks = []; // 存储失败回调

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => callback()); // 执行所有成功回调
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => callback()); // 执行所有失败回调
      }
    };

    try {
      executor(resolve, reject); // 立即执行 executor
    } catch (error) {
      reject(error); // 捕获 executor 中的异常并 reject
    }
  }

  then(onFulfilled, onRejected) {
    // 处理 onFulfilled 和 onRejected 的默认值
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };

    // 返回一个新的 Promise
    return new MyPromise((resolve, reject) => {
      const handleFulfilled = () => {
        try {
          const result = onFulfilled(this.value);
          resolvePromise(result, resolve, reject);
        } catch (error) {
          reject(error);
        }
      };

      const handleRejected = () => {
        try {
          const result = onRejected(this.reason);
          resolvePromise(result, resolve, reject);
        } catch (error) {
          reject(error);
        }
      };

      if (this.state === 'fulfilled') {
        setTimeout(handleFulfilled, 0); // 异步执行回调
      } else if (this.state === 'rejected') {
        setTimeout(handleRejected, 0); // 异步执行回调
      } else if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => setTimeout(handleFulfilled, 0));
        this.onRejectedCallbacks.push(() => setTimeout(handleRejected, 0));
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  finally(callback) {
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => { throw reason; });
      }
    );
  }

  // 静态方法: resolve
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }
    return new MyPromise((resolve) => resolve(value));
  }

  // 静态方法: reject
  static reject(reason) {
    return new MyPromise((_, reject) => reject(reason));
  }

  // 静态方法: all
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completed = 0;

      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          (value) => {
            results[index] = value;
            completed += 1;
            if (completed === promises.length) {
              resolve(results);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });

      if (promises.length === 0) {
        resolve([]);
      }
    });
  }

  // 静态方法: race
  static race(promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise) => {
        MyPromise.resolve(promise).then(resolve, reject);
      });
    });
  }

  // 静态方法: allSettled
  static allSettled(promises) {
    return new MyPromise((resolve) => {
      const results = [];
      let completed = 0;

      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          (value) => {
            results[index] = { status: 'fulfilled', value };
            completed += 1;
            if (completed === promises.length) {
              resolve(results);
            }
          },
          (reason) => {
            results[index] = { status: 'rejected', reason };
            completed += 1;
            if (completed === promises.length) {
              resolve(results);
            }
          }
        );
      });

      if (promises.length === 0) {
        resolve([]);
      }
    });
  }

  // 静态方法: any
  static any(promises) {
    return new MyPromise((resolve, reject) => {
      const errors = [];
      let rejectedCount = 0;

      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          resolve,
          (reason) => {
            errors[index] = reason;
            rejectedCount += 1;
            if (rejectedCount === promises.length) {
              reject(new AggregateError(errors, 'All promises were rejected'));
            }
          }
        );
      });

      if (promises.length === 0) {
        reject(new AggregateError([], 'All promises were rejected'));
      }
    });
  }
}

// 处理 then 中返回值与新 Promise 的关系
function resolvePromise(result, resolve, reject) {
  if (result === resolve) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  if (result && (typeof result === 'object' || typeof result === 'function')) {
    let called = false;
    try {
      const then = result.then;
      if (typeof then === 'function') {
        then.call(
          result,
          (value) => {
            if (called) return;
            called = true;
            resolvePromise(value, resolve, reject);
          },
          (reason) => {
            if (called) return;
            called = true;
            reject(reason);
          }
        );
      } else {
        resolve(result);
      }
    } catch (error) {
      if (called) return;
      called = true;
      reject(error);
    }
  } else {
    resolve(result);
  }
}

// 测试用例
MyPromise.deferred = function () {
  let defer = {};
  defer.promise = new MyPromise((resolve, reject) => {
    defer.resolve = resolve;
    defer.reject = reject;
  });
  return defer;
};

参考:

Promise A+

手写一个Promise/A+,完美通过官方872个测试用例