手写Promise进阶指南：跨年技术沉淀与实现

一、Promise技术演进与手写价值

Promise规范自2009年提出以来，经历了ES5原型实现、ES6类封装、Async/Await语法糖三个阶段。在跨年技术迭代中，其核心价值始终体现在：将复杂的异步操作转化为可预测的流程控制。手写Promise不仅能帮助开发者深入理解其工作原理，更能解决以下实际问题：

1. 调试困难：原生Promise的错误堆栈不直观
2. 扩展受限：无法自定义状态转换逻辑
3. 性能优化：避免创建过多中间Promise对象

典型应用场景包括：自定义调度策略（如优先级队列）、集成第三方异步库、实现取消机制等。据2023年JS生态调查显示，37%的高级前端工程师仍会定期手写Promise核心逻辑。

二、基础架构设计

1. 状态机模型实现

class MyPromise {
  static PENDING = 'pending';
  static FULFILLED = 'fulfilled';
  static REJECTED = 'rejected';
  constructor(executor) {
    this.state = MyPromise.PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    const resolve = (value) => {
      if (this.state === MyPromise.PENDING) {
        this.state = MyPromise.FULFILLED;
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    const reject = (reason) => {
      if (this.state === MyPromise.PENDING) {
        this.state = MyPromise.REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

关键设计点：

• 三态互斥：通过状态枚举确保状态唯一性
• 延迟执行：回调函数在状态变更后触发
• 错误捕获：try-catch包裹执行器

2. 链式调用实现

then(onFulfilled, onRejected) {
  // 参数默认值处理
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  const promise2 = new MyPromise((resolve, reject) => {
    const handleFulfilled = () => {
      setTimeout(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    };
    const handleRejected = () => {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    };
    if (this.state === MyPromise.FULFILLED) {
      handleFulfilled();
    } else if (this.state === MyPromise.REJECTED) {
      handleRejected();
    } else {
      this.onFulfilledCallbacks.push(handleFulfilled);
      this.onRejectedCallbacks.push(handleRejected);
    }
  });
  return promise2;
}

链式调用核心机制：

1. 返回新Promise：实现方法链
2. 异步调度：使用setTimeout确保微任务队列顺序
3. 参数透传：通过resolvePromise处理返回值

三、高级功能实现

1. 静态方法实现

// all方法实现
static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;
    if (promises.length === 0) {
      resolve(results);
      return;
    }
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => {
          results[index] = value;
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        },
        reason => reject(reason)
      );
    });
  });
}
// race方法实现
static race(promises) {
  return new MyPromise((resolve, reject) => {
    promises.forEach(promise => {
      MyPromise.resolve(promise).then(resolve, reject);
    });
  });
}

2. 错误处理增强

// finally方法实现
finally(callback) {
  return this.then(
    value => MyPromise.resolve(callback()).then(() => value),
    reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  );
}
// catch方法实现
catch(onRejected) {
  return this.then(null, onRejected);
}

四、跨年技术优化

1. 性能优化方案

1. 内存优化：使用WeakMap存储回调（避免内存泄漏）
2. 调度优化：实现自定义调度器（如优先级队列）
3. 批量处理：合并微任务执行

2. 调试增强方案

// 添加调试信息
constructor(executor, debugInfo = {}) {
  this.debugInfo = {
    createTime: Date.now(),
    stack: new Error().stack,
    ...debugInfo
  };
  // ...原有实现
}
// 添加日志方法
log() {
  console.log(`[Promise ${this.debugInfo.id}] State: ${this.state}`);
}

五、完整实现与测试

1. 完整代码结构

class MyPromise {
  // 静态属性...
  constructor(executor) {
    // 初始化代码...
  }
  then(onFulfilled, onRejected) {
    // then实现...
  }
  catch(onRejected) {
    // catch实现...
  }
  finally(callback) {
    // finally实现...
  }
  static resolve(value) {
    // resolve静态方法...
  }
  static reject(reason) {
    // reject静态方法...
  }
  static all(promises) {
    // all实现...
  }
  static race(promises) {
    // race实现...
  }
}
// 辅助函数
function resolvePromise(promise2, x, resolve, reject) {
  // 处理thenable对象和循环引用...
}

2. 测试用例示例

// 基础功能测试
test('basic resolution', () => {
  const promise = new MyPromise(resolve => resolve(1));
  return promise.then(val => {
    expect(val).toBe(1);
  });
});
// 链式调用测试
test('chaining', () => {
  let order = [];
  return new MyPromise(resolve => {
    order.push(1);
    resolve();
  })
  .then(() => {
    order.push(2);
    return new MyPromise(resolve => resolve(3));
  })
  .then(val => {
    order.push(val); // 3
    expect(order).toEqual([1, 2, 3]);
  });
});

六、实践建议

1. 渐进式实现：先实现核心功能，再逐步添加静态方法
2. 调试技巧：
   • 使用console.trace跟踪调用栈
   • 在关键状态变更点添加日志
3. 性能监控：

   const start = performance.now();
   promise.then(() => {
     console.log(`Execution time: ${performance.now() - start}ms`);
   });

4. 兼容性处理：
   • 添加Promise.prototype.finally polyfill
   • 处理旧版浏览器的微任务模拟

七、技术演进展望

随着JS引擎的持续优化，未来Promise实现可能向以下方向发展：

1. 更精细的内存管理
2. 与Web Workers的深度集成
3. 基于WASM的高性能实现
4. 更直观的错误堆栈追踪

手写Promise不仅是技术挑战，更是深入理解异步编程范式的有效途径。通过本文的实现方案，开发者可以构建出符合自身业务需求的Promise库，在复杂异步场景中获得更好的控制力和调试能力。建议结合实际项目需求，逐步扩展基础实现，形成具有业务特色的异步处理解决方案。