logo

开发者热搜

『JS手写』手写 Promise 跨年特辑：从原理到实现全解析

作者：谁偷走了我的奶酪2025.09.19 12:47浏览量：2

简介：本文深入解析如何手写实现符合Promise/A+规范的Promise类，包含状态管理、链式调用、异步调度等核心机制，提供可运行的完整代码和跨浏览器兼容方案。

『JS手写』手写 Promise 跨年特辑：从原理到实现全解析

一、为什么需要手写Promise？

在ES6正式将Promise纳入语言标准前，前端异步编程长期处于”回调地狱”的混乱状态。即使现在，理解Promise内部机制仍是深入掌握JavaScript异步编程的关键。手写Promise不仅能加深对Promise/A+规范的理解，更能培养解决复杂异步问题的能力，这在面试和源码级开发中具有重要价值。

1.1 历史背景

2015年ES6发布前，前端生态存在多种Promise实现：

  • jQuery的Deferred对象
  • Q.js库
  • Bluebird等高性能实现
    这些实现虽功能相似，但存在行为差异。Promise/A+规范的出现统一了社区标准。

1.2 核心价值

手写实现可带来：

  • 深入理解thenable对象机制
  • 掌握微任务调度原理
  • 理解链式调用的实现技巧
  • 培养规范意识（符合Promise/A+测试套件）

二、Promise核心机制解析

2.1 状态机模型

Promise必须实现三种状态转换：

  1. const PENDING = 'pending';
  2. const FULFILLED = 'fulfilled';
  3. const REJECTED = 'rejected';
  5. class MyPromise {
  6.   constructor(executor) {
  7.     this.state = PENDING;
  8.     this.value = undefined;
  9.     this.reason = undefined;
  10.     this.onFulfilledCallbacks = [];
  11.     this.onRejectedCallbacks = [];
  12.   }
  13. }

状态转换规则：

  1. 只能从pending转为fulfilled/rejected
  2. 一旦转换不可逆
  3. 转换后需执行对应回调队列

2.2 异步调度策略

实现异步的关键在于微任务调度：

  1. // 兼容方案：优先使用微任务
  2. const resolvePromise = (promise, x, resolve, reject) => {
  3.   // 使用MutationObserver或setTimeout模拟微任务
  4.   if (typeof Promise !== 'undefined' && Promise.resolve) {
  5.     Promise.resolve().then(() => executeCallback(x, resolve, reject));
  6.   } else {
  7.     setTimeout(() => executeCallback(x, resolve, reject), 0);
  8.   }
  9. };

2.3 then方法实现

then方法是Promise的核心，需处理：

  1. 值穿透（连续then调用）
  2. 异步回调执行

  3. 链式调用支持

    1. then(onFulfilled, onRejected) {
    2. // 参数默认值处理
    3. onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    4. onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
    6. const promise2 = new MyPromise((resolve, reject) => {
    7.  if (this.state === FULFILLED) {
    8.    setTimeout(() => handleCallback(onFulfilled, this.value, resolve, reject), 0);
    9.  } else if (this.state === REJECTED) {
    10.    setTimeout(() => handleCallback(onRejected, this.reason, resolve, reject), 0);
    11.  } else {
    12.    this.onFulfilledCallbacks.push(value => 
    13.      handleCallback(onFulfilled, value, resolve, reject));
    14.    this.onRejectedCallbacks.push(reason => 
    15.      handleCallback(onRejected, reason, resolve, reject));
    16.  }
    17. });
    19. return promise2;
    20. }

三、完整实现与规范兼容

3.1 基础类实现

  1. class MyPromise {
  2.   constructor(executor) {
  3.     this.state = PENDING;
  4.     this.value = undefined;
  5.     this.reason = undefined;
  6.     this.onFulfilledCallbacks = [];
  7.     this.onRejectedCallbacks = [];
  9.     const resolve = value => {
  10.       if (value instanceof MyPromise) {
  11.         return value.then(resolve, reject);
  12.       }
  13.       if (this.state === PENDING) {
  14.         this.state = FULFILLED;
  15.         this.value = value;
  16.         this.onFulfilledCallbacks.forEach(fn => fn());
  17.       }
  18.     };
  20.     const reject = reason => {
  21.       if (this.state === PENDING) {
  22.         this.state = REJECTED;
  23.         this.reason = reason;
  24.         this.onRejectedCallbacks.forEach(fn => fn());
  25.       }
  26.     };
  28.     try {
  29.       executor(resolve, reject);
  30.     } catch (err) {
  31.       reject(err);
  32.     }
  33.   }
  35.   // ...then方法实现（同上）
  36. }

3.2 静态方法实现

  1. // 类方法实现
  2. MyPromise.resolve = function(value) {
  3.   return new MyPromise(resolve => resolve(value));
  4. };
  6. MyPromise.reject = function(reason) {
  7.   return new MyPromise((_, reject) => reject(reason));
  8. };
  10. MyPromise.all = function(promises) {
  11.   return new MyPromise((resolve, reject) => {
  12.     const results = [];
  13.     let count = 0;
  14.     promises.forEach((promise, index) => {
  15.       MyPromise.resolve(promise).then(
  16.         value => {
  17.           results[index] = value;
  18.           if (++count === promises.length) resolve(results);
  19.         },
  20.         reject
  21.       );
  22.     });
  23.   });
  24. };
  26. MyPromise.race = function(promises) {
  27.   return new MyPromise((resolve, reject) => {
  28.     promises.forEach(promise => {
  29.       MyPromise.resolve(promise).then(resolve, reject);
  30.     });
  31.   });
  32. };

3.3 跨浏览器兼容方案

  1. 微任务模拟：

    1. const asyncFlush = (() => {
    2. if (typeof Promise !== 'undefined') {
    3.  return () => Promise.resolve().then(flush);
    4. } else if (typeof MutationObserver !== 'undefined') {
    5.  let queue = [];
    6.  const node = document.createTextNode('');
    7.  new MutationObserver(() => {
    8.    while (queue.length) queue.shift()();
    9.  }).observe(node, { characterData: true });
    10.  return callback => {
    11.    queue.push(callback);
    12.    node.data = Math.random();
    13.  };
    14. } else {
    15.  return callback => setTimeout(callback, 0);
    16. }
    17. })();

  2. Object.prototype污染防护：
    ```javascript
    const hasOwnProperty = Object.prototype.hasOwnProperty;
    function isObject(obj) {
    return obj !== null && typeof obj === ‘object’;
    }

function getThen(x) {
const then = isObject(x) && hasOwnProperty.call(x, ‘then’) ? x.then : null;
if (typeof then === ‘function’) return then;
return null;
}

  2. ## 四、进阶实现技巧
  4. ### 4.1 链式调用优化
  5. ```javascript
  6. then(onFulfilled, onRejected) {
  7.   const promise2 = new MyPromise((resolve, reject) => {
  8.     const handleFulfilled = value => {
  9.       try {
  10.         if (typeof onFulfilled !== 'function') {
  11.           resolve(value);
  12.         } else {
  13.           const x = onFulfilled(value);
  14.           resolvePromise(promise2, x, resolve, reject);
  15.         }
  16.       } catch (e) {
  17.         reject(e);
  18.       }
  19.     };
  21.     // 类似实现handleRejected...
  22.   });
  24.   return promise2;
  25. }

4.2 性能优化策略

  1. 回调合并：使用单个定时器处理所有回调
  2. 错误边界：try-catch包裹所有回调执行
  3. 值缓存：避免重复计算thenable值

五、测试验证方案

5.1 基础测试用例

  1. // 状态转换测试
  2. const promise = new MyPromise((resolve) => {
  3.   setTimeout(() => resolve(1), 100);
  4. });
  6. promise.then(value => {
  7.   console.log(value); // 应输出1
  8. });
  10. // 链式调用测试
  11. MyPromise.resolve(1)
  12.   .then(value => value + 1)
  13.   .then(value => value * 2)
  14.   .then(value => {
  15.     console.log(value); // 应输出4
  16.   });

5.2 规范兼容测试

使用promises-aplus-tests进行验证：

  1. 安装测试工具：npm install promises-aplus-tests -g
  2. 创建适配器：
    1. const adapter = {
    2. resolved: MyPromise.resolve,
    3. rejected: MyPromise.reject,
    4. deferred: () => {
    5.  const result = {};
    6.  result.promise = new MyPromise((resolve, reject) => {
    7.    result.resolve = resolve;
    8.    result.reject = reject;
    9.  });
    10.  return result;
    11. }
    12. };
  3. 运行测试：promises-aplus-tests adapter.js

六、实际应用建议

  1. 学习阶段：先理解核心逻辑，再逐步完善边缘情况
  2. 生产环境：优先使用原生Promise或成熟库（如Bluebird）

  3. 调试技巧：

    • 使用Promise.prototype.finally追踪流程
    • 通过console.log标记状态变化
    • 利用开发者工具的Async堆栈追踪

  4. 性能优化：

    • 避免在then回调中创建新Promise
    • 合理使用Promise.all处理并行请求
    • 对可取消操作实现AbortController

七、总结与展望

手写Promise实现是理解JavaScript异步编程的终极试炼。通过实现过程，开发者不仅能掌握状态管理、异步调度等核心概念，更能培养规范意识和工程化思维。随着ES2023引入Promise.try等新特性，Promise生态仍在持续演进，但底层原理始终是理解新特性的基石。

建议读者在完成基础实现后，尝试：

  1. 实现Promise.allSettled
  2. 添加取消功能
  3. 研究async/await的编译原理
  4. 探索Generator函数与Promise的关系

通过持续实践和思考，开发者将构建起完整的异步编程知识体系，为处理复杂前端架构打下坚实基础。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询