Promise的polyfill实现原理

在现代JavaScript开发中，Promise已成为处理异步操作的标准方式。然而，在不支持Promise的旧浏览器环境中，我们需要使用polyfill来提供相同的功能。本文将深入探讨Promise的polyfill实现原理，帮助开发者理解其内部工作机制。

Promise的核心概念

在实现Promise polyfill之前，我们需要明确Promise的几个核心特性：

状态机：Promise有三种状态 - pending（等待）、fulfilled（已完成）和rejected（已拒绝）
不可变性：一旦状态从pending变为fulfilled或rejected，就不能再改变
链式调用：通过.then()方法可以链式调用多个异步操作
值穿透：如果.then()中传入的不是函数，则值会穿透到下一个.then()

基本结构实现

一个简单的Promise polyfill基本结构如下：

javascript 复制代码

function MyPromise(executor) {
  this.state = 'pending'; // 初始状态
  this.value = undefined; // 成功时的值
  this.reason = undefined; // 失败时的原因
  this.onFulfilledCallbacks = []; // 成功回调队列
  this.onRejectedCallbacks = []; // 失败回调队列

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

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

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

then方法的实现

.then()方法是Promise的核心，它需要处理以下几种情况：

当前Promise已完成或已拒绝
当前Promise仍处于pending状态
回调函数返回普通值或另一个Promise

javascript 复制代码

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  // 处理值穿透
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  
  const promise2 = new MyPromise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
      
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
  });
  
  return promise2;
};

resolvePromise函数

resolvePromise函数用于处理.then()方法中回调函数的返回值，确保符合Promise/A+规范：

javascript 复制代码

function resolvePromise(promise2, x, resolve, reject) {
  // 防止循环引用
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  
  // 防止多次调用
  let called = false;
  
  if (x !== null && (typeof x === 'object' || 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);
  }
}

其他方法的实现

catch方法

javascript 复制代码

MyPromise.prototype.catch = function(onRejected) {
  return this.then(null, onRejected);
};

finally方法

javascript 复制代码

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

静态方法resolve和reject

javascript 复制代码

MyPromise.resolve = function(value) {
  if (value instanceof MyPromise) {
    return value;
  }
  return new MyPromise(resolve => resolve(value));
};

MyPromise.reject = function(reason) {
  return new MyPromise((resolve, reject) => reject(reason));
};

异步执行保证

Promise的回调函数必须是异步执行的，这通过setTimeout实现。虽然现代浏览器有更好的微任务机制（如MutationObserver或process.nextTick），但为了兼容性，polyfill通常使用setTimeout。

完整实现注意事项

一个完整的Promise polyfill还需要考虑：

Promise.all：等待所有Promise完成或第一个失败
Promise.race：返回第一个完成或失败的Promise
Promise.allSettled：等待所有Promise完成（无论成功或失败）
错误处理：确保未捕获的Promise错误不会静默失败
性能优化：减少不必要的内存分配和函数调用

总结

实现一个符合Promise/A+规范的polyfill需要考虑诸多细节，包括状态管理、链式调用、异步执行、错误处理等。理解这些原理不仅有助于编写更好的异步代码，也能在遇到问题时快速定位和解决。虽然现代浏览器已原生支持Promise，但了解其polyfill实现原理仍然是JavaScript开发者的一项重要技能。

在实际项目中，推荐使用成熟的Promise polyfill库（如es6-promise或core-js），它们经过了充分测试并考虑了各种边界情况。