一、状态机的本质：从混沌到有序的认知突破

在初次尝试实现Promise时，笔者陷入了一个典型误区：试图通过简单的回调函数堆砌实现异步控制。这种”拼图式”编程导致代码在处理嵌套Promise时出现状态混乱，例如then方法多次调用时无法正确维护结果传递链。

1.1 三态模型的构建

真正的突破始于对Promise状态机的深刻理解。根据Promise/A+规范，每个Promise实例必须严格维护三种状态：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    this.state = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
  }
}

这种设计实现了状态的单向流转，通过resolve和reject方法的严格校验：

resolve = (value) => {
  if (this.state === PENDING) {
    this.state = FULFILLED;
    this.value = value;
    this.onFulfilledCallbacks.forEach(fn => fn());
  }
}

1.2 状态变更的不可逆性

实践中发现，状态变更的不可逆性是保证异步链可靠性的关键。曾尝试在rejected状态后重新调用resolve，导致后续then方法意外执行，这验证了规范中”状态一旦改变就不能再变”设计的必要性。

二、链式调用的魔法：微任务队列的深度实现

2.1 异步调度机制的探索

最初实现的then方法存在严重缺陷：同步执行的回调导致无法正确处理异步操作。通过研究Node.js的process.nextTick和浏览器环境的MutationObserver，最终采用类似setTimeout(fn, 0)的简易微任务模拟：

const flushCallbacks = () => {
  while(callbacks.length) {
    const callback = callbacks.shift();
    callback();
  }
};
const asyncFlush = () => {
  setTimeout(flushCallbacks, 0);
};

2.2 返回值穿透的实现

处理then的返回值穿透时，遇到两个核心挑战：

1. 返回普通值时需要包装成新Promise
2. 返回另一个Promise时需要建立依赖关系

解决方案是递归解析返回值：

then(onFulfilled, onRejected) {
  const promise2 = new MyPromise((resolve, reject) => {
    const handleFulfilled = (value) => {
      try {
        if (typeof onFulfilled === 'function') {
          const x = onFulfilled(value);
          resolvePromise(promise2, x, resolve, reject);
        } else {
          resolve(value);
        }
      } catch (e) {
        reject(e);
      }
    };
    // 类似实现handleRejected...
  });
  return promise2;
}

三、错误处理的进阶：边界条件的全面覆盖

3.1 异常捕获的完整链路

在实现catch方法时，发现简单的try-catch无法覆盖所有场景。特别是当onFulfilled抛出异常时，需要确保错误能传递到后续链：

const resolvePromise = (promise2, x, resolve, reject) => {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected'));
  }
  let called = false;
  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      const then = x.then;
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
};

3.2 静态方法的实现启示

实现all、race等静态方法时，深刻理解了Promise的集合操作本质：

static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;
    const processValue = (i, value) => {
      results[i] = value;
      count++;
      if (count === promises.length) {
        resolve(results);
      }
    };
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => processValue(index, value),
        err => reject(err)
      );
    });
  });
}

四、性能优化的实践：从理论到工程的跨越

4.1 内存管理的突破

在压力测试中发现，未清理的回调函数会导致内存泄漏。解决方案是在状态变更后清空回调队列：

resolve = (value) => {
  if (this.state === PENDING) {
    this.state = FULFILLED;
    this.value = value;
    const callbacks = this.onFulfilledCallbacks;
    this.onFulfilledCallbacks = []; // 关键优化
    callbacks.forEach(fn => fn(value));
  }
}

4.2 异步批处理的实现

借鉴事件循环机制，实现了回调函数的批量执行：

class TaskQueue {
  constructor() {
    this.queue = [];
    this.isFlushing = false;
  }
  enqueue(task) {
    this.queue.push(task);
    if (!this.isFlushing) {
      this.isFlushing = true;
      Promise.resolve().then(() => this.flush());
    }
  }
  flush() {
    while(this.queue.length) {
      const task = this.queue.shift();
      task();
    }
    this.isFlushing = false;
  }
}

五、实践建议与调试技巧

1. 状态可视化调试：在Promise实例中添加debugState()方法，实时输出当前状态和值
2. 链式调用跟踪：通过修改then方法，记录调用栈信息辅助定位问题
3. 异步时序测试：使用async-await包装测试用例，验证复杂场景下的时序正确性
4. 性能基准测试：对比原生Promise与自定义实现的执行时间，定位优化点

手写Promise的过程，本质上是深入理解JavaScript异步编程范式的过程。从最初的状态混乱到最终的稳定实现，每个”恍然大悟”的瞬间都对应着对异步控制流的深刻认知。这种实践不仅提升了编码能力，更重要的是建立了对Promise生态的系统性理解，为后续学习RxJS、Async/Await等高级特性奠定了坚实基础。