深入理解Promise实现原理与手写实践

1. 为什么需要理解Promise的实现原理

在ES6标准发布之前，JavaScript开发者主要依靠回调函数来处理异步操作。回调地狱（Callback Hell）是当时前端开发中最令人头疼的问题之一——多层嵌套的回调函数不仅难以阅读和维护，错误处理也变得异常复杂。

我至今还记得2015年维护一个基于jQuery的项目时，遇到的一个典型回调地狱案例：

javascript复制getUser(userId, function(user) {
  getOrders(user.id, function(orders) {
    orders.forEach(function(order) {
      getItems(order.id, function(items) {
        items.forEach(function(item) {
          updateStock(item.id, function() {
            // 更多嵌套...
          });
        });
      });
    });
  });
});

这种代码结构就像一座倒置的金字塔，稍微复杂点的业务逻辑就会向右无限延伸。更糟糕的是，每个回调都需要单独处理错误，导致代码中充斥着重复的try-catch块。

Promise的出现彻底改变了这种局面。它通过链式调用（chaining）将异步操作扁平化，使代码可读性大幅提升。同样的逻辑用Promise实现：

javascript复制getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => Promise.all(orders.map(order => getItems(order.id))))
  .then(items => Promise.all(items.flat().map(item => updateStock(item.id))))
  .catch(error => console.error('处理失败:', error));

这种线性的代码结构不仅更符合人类的思维习惯，还提供了统一的错误处理机制。但仅仅会使用Promise API是不够的——理解其实现原理能帮助我们在以下场景中游刃有余：

1. 调试复杂异步流程：当Promise链中出现意外行为时，了解内部机制能快速定位问题
2. 性能优化：知道微任务队列的工作原理，可以合理安排代码执行顺序
3. 高级模式实现：如取消Promise、进度通知等非标准功能
4. 面试深度考察：大厂面试常要求手写Promise实现

2. Promise/A+规范核心要点解析

在实现自己的Promise之前，必须深入理解Promise/A+规范。这个仅有2000余字的规范定义了Promise的通用行为标准，是所有现代Promise实现的基石。以下是规范中最关键的几个部分：

2.1 三种状态及其转换

Promise必须处于以下三种状态之一：

• pending：初始状态，可转换为fulfilled或rejected
• fulfilled：操作成功完成，必须有一个不可变的终值（value）
• rejected：操作失败，必须有一个不可变的拒因（reason）

状态转换是不可逆的，且只能从pending开始转换。这意味着一个Promise一旦被解决（settled），就不能再改变状态。

javascript复制// 状态转换示意图
new Promise((resolve, reject) => {
  // 初始状态为pending
  resolve('success'); // 转换为fulfilled
  // 之后的resolve/reject调用无效
  reject('fail'); // 会被忽略
});

2.2 then方法的契约

then方法是Promise最核心的接口，规范对其行为有严格定义：

1. 一个Promise必须提供then方法来访问其当前或最终的value/reason
2. then方法接受两个可选参数：

   javascript复制promise.then(onFulfilled, onRejected)
   

3. 这两个参数如果不是函数，必须被忽略（实现透传的关键）
4. then方法必须返回一个新的Promise（链式调用的基础）

2.3 解决过程（Resolution Procedure）

规范第2.3节详细定义了[[Resolve]](promise, x)算法，这是Promise互操作性的关键。当resolve一个Promise时：

1. 如果x与promise相同，用TypeError作为reason拒绝promise（避免循环）
2. 如果x是一个Promise，采用其状态
3. 如果x是一个对象或函数，尝试获取then方法（支持thenable对象）
4. 否则用x作为value兑现promise

这个算法使得不同实现的Promise可以相互嵌套和组合，也是async/await语法的基础。

3. 手把手实现符合规范的Promise

现在我们来逐步实现一个符合Promise/A+规范的MyPromise类。我们将使用ES6 class语法，但核心逻辑同样适用于ES5函数实现。

3.1 基础骨架与状态管理

首先定义类的基本结构：

javascript复制class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 'pending' | 'fulfilled' | 'rejected'
    this.value = undefined; // 终值
    this.reason = undefined; // 拒因
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列

    const resolve = (value) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach(fn => fn());
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(fn => fn());
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
}

关键点说明：

1. 使用state属性跟踪Promise状态，确保只转换一次
2. 维护两个回调队列，支持异步resolve时的回调触发
3. executor中的错误会自动捕获并reject

3.2 then方法的完整实现

then方法是Promise最复杂的部分，需要正确处理各种边界情况：

javascript复制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 = () => {
      queueMicrotask(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (error) {
          reject(error);
        }
      });
    };

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

    if (this.state === 'fulfilled') {
      handleFulfilled();
    } else if (this.state === 'rejected') {
      handleRejected();
    } else { // pending
      this.onFulfilledCallbacks.push(handleFulfilled);
      this.onRejectedCallbacks.push(handleRejected);
    }
  });

  return promise2;
}

实现细节：

1. 使用queueMicrotask确保回调异步执行（符合规范要求）
2. resolvePromise函数处理返回值x与promise2的关系
3. 错误处理确保任何异常都能被捕获并传递给下一个Promise

3.3 解决过程函数实现

resolvePromise函数实现了规范中的[[Resolve]]算法：

javascript复制function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  if (x instanceof MyPromise) {
    x.then(resolve, reject);
  } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    let then;
    try {
      then = x.then;
    } catch (error) {
      return reject(error);
    }

    if (typeof then === 'function') {
      let called = false;
      try {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } catch (error) {
        if (!called) reject(error);
      }
    } else {
      resolve(x);
    }
  } else {
    resolve(x);
  }
}

这个函数处理了所有可能的返回值类型：

1. Promise对象：采用其状态
2. Thenable对象：尝试调用其then方法
3. 普通值：直接resolve

4. 高级功能与边界情况处理

一个完整的Promise实现还需要考虑更多实际使用场景。以下是几个关键扩展点：

4.1 静态方法实现

javascript复制static resolve(value) {
  if (value instanceof MyPromise) return value;
  return new MyPromise(resolve => resolve(value));
}

static reject(reason) {
  return new MyPromise((_, reject) => reject(reason));
}

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

static race(promises) {
  return new MyPromise((resolve, reject) => {
    promises.forEach(promise => {
      MyPromise.resolve(promise).then(resolve, reject);
    });
  });
}

4.2 错误处理与unhandledRejection

在实际项目中，我们需要检测未被处理的Promise拒绝：

javascript复制// 在全局增加未处理拒绝的监听
if (typeof window !== 'undefined') {
  window.addEventListener('unhandledrejection', event => {
    console.warn('Unhandled promise rejection:', event.reason);
  });
}

4.3 性能优化技巧

1. 微任务队列管理：现代浏览器中优先使用queueMicrotask，回退到MutationObserver或setTimeout
2. 内存优化：在回调执行后清空回调队列
3. 避免不必要的Promise包装：在静态方法中先检查参数类型

5. 测试与验证

实现完成后，我们需要验证我们的MyPromise是否符合Promise/A+规范。可以使用官方测试套件：

1. 安装测试工具：

bash复制npm install promises-aplus-tests -D

2. 添加适配器：

javascript复制MyPromise.deferred = function() {
  const result = {};
  result.promise = new MyPromise((resolve, reject) => {
    result.resolve = resolve;
    result.reject = reject;
  });
  return result;
};

3. 运行测试：

bash复制promises-aplus-tests MyPromise.js

一个完整的实现应该通过全部872个测试用例。在实际开发中，我建议逐步实现功能并分阶段运行测试，这样可以快速定位问题所在。

6. 从Promise到async/await

理解Promise实现原理对掌握async/await至关重要。实际上，async函数可以看作是基于Promise的语法糖：

javascript复制async function example() {
  return 42;
}
// 等价于
function example() {
  return Promise.resolve(42);
}

而await表达式本质上是在then回调中恢复函数执行：

javascript复制async function fetchData() {
  const response = await fetch('/api');
  const data = await response.json();
  return data;
}
// 大致等价于
function fetchData() {
  return fetch('/api').then(response => {
    return response.json().then(data => {
      return data;
    });
  });
}

理解这种转换关系能帮助我们：

1. 正确处理async函数中的错误
2. 优化异步代码的性能
3. 实现更复杂的控制流（如并行执行）

7. 常见问题与解决方案

在实际项目中使用Promise时，经常会遇到一些棘手的问题。以下是我总结的几个典型场景：

7.1 Promise内存泄漏

长时间挂起的Promise可能造成内存泄漏。例如：

javascript复制function createPendingPromise() {
  return new Promise(() => {}); // 永远不会resolve/reject
}

const leakedPromises = [];
for (let i = 0; i < 1000; i++) {
  leakedPromises.push(createPendingPromise());
}

解决方案：

1. 总是为Promise设置超时
2. 使用Promise.race添加超时控制：

javascript复制function withTimeout(promise, timeout) {
  return Promise.race([
    promise,
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Timeout')), timeout)
    )
  ]);
}

7.2 错误被"吞掉"

Promise链中未被捕获的错误会静默失败：

javascript复制Promise.resolve()
  .then(() => { throw new Error('Oops'); })
  .then(() => console.log('This will not run'));
// 错误被吞掉，控制台没有输出

最佳实践：

1. 总是在Promise链末尾添加catch
2. 或者在async函数中使用try-catch
3. 监听unhandledrejection事件

7.3 并行控制

无限制的并行Promise可能导致性能问题：

javascript复制// 同时发起1000个网络请求
const requests = Array(1000).fill().map(() => fetch('/api'));

改进方案：

1. 使用p-limit等库控制并发数
2. 分批处理：

javascript复制async function batchProcess(items, concurrency = 5) {
  const results = [];
  for (let i = 0; i < items.length; i += concurrency) {
    const batch = items.slice(i, i + concurrency);
    results.push(...await Promise.all(batch.map(processItem)));
  }
  return results;
}

8. 进阶话题：取消与进度通知

标准Promise不支持取消和进度通知，但我们可以通过扩展实现这些功能：

8.1 可取消Promise

javascript复制class CancelablePromise {
  constructor(executor) {
    this._promise = new Promise(executor);
    this._canceled = false;
  }

  cancel() {
    this._canceled = true;
  }

  then(onFulfilled, onRejected) {
    return this._promise.then(
      value => this._canceled ? undefined : onFulfilled?.(value),
      error => this._canceled ? undefined : onRejected?.(error)
    );
  }
}

8.2 带进度通知的Promise

javascript复制class ProgressPromise {
  constructor(executor) {
    this._listeners = [];
    this._promise = new Promise((resolve, reject) => {
      executor(
        resolve, 
        reject,
        progress => {
          this._listeners.forEach(listener => listener(progress));
        }
      );
    });
  }

  onProgress(fn) {
    this._listeners.push(fn);
    return this;
  }

  then(onFulfilled, onRejected) {
    return this._promise.then(onFulfilled, onRejected);
  }
}

这些扩展虽然实用，但要注意与标准Promise的互操作性。在团队项目中应确保所有成员理解这些扩展的行为。