如何用JavaScript编写一个完整的Promise polyfill？-js教程-PHP中文网

自定义Promise通过状态管理、链式调用和异步调度模拟原生机制，核心是构造器中的resolve/reject函数控制状态流转，then方法返回新Promise并利用resolvePromise处理回调返回值，确保符合Promise/A+规范；通过runAsync在不同环境模拟微任务队列以保证异步执行顺序；静态方法all和race基于实例方法实现，分别等待所有或首个Promise完成，结合兼容性检测与降级策略（如queueMicrotask、MutationObserver、setTimeout）确保跨环境正确运行。

如何用javascript编写一个完整的promise polyfill？

这事儿听起来复杂，但拆解开来，无非就是把原生Promise的那些核心机制——状态管理、链式调用、异步调度——用我们自己的代码重新实现一遍。核心思路就是构建一个自定义的

Promise

登录后复制

类，它内部维护状态（待定、成功、失败），并通过

then

登录后复制

方法来注册回调，同时确保这些回调在适当的时机异步执行，并且能正确地传递值或错误，形成链式调用。

解决方案

要写一个完整的Promise polyfill，我们得从它的核心构造器和实例方法着手，然后是那些静态方法。

首先，

MyPromise

登录后复制

构造函数需要接收一个

executor

登录后复制

函数，这个函数会立即执行，并接收

resolve

登录后复制

和

reject

登录后复制

两个参数。我们需要定义三种内部状态：

PENDING

登录后复制

、

FULFILLED

登录后复制

和

REJECTED

登录后复制

，以及存储结果的

value

登录后复制

或错误原因的

reason

登录后复制

。

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 = []; // 存储失败回调

    const resolve = (value) => {
      // 模拟Promise Resolution Procedure，处理then返回Promise的情况
      if (value instanceof MyPromise) {
        return value.then(resolve, reject);
      }
      if (this.state === PENDING) {
        this.state = FULFILLED;
        this.value = value;
        // 确保回调异步执行
        this.onFulfilledCallbacks.forEach(cb => this.runAsync(cb, value));
      }
    };

    const reject = (reason) => {
      if (this.state === PENDING) {
        this.state = REJECTED;
        this.reason = reason;
        // 确保回调异步执行
        this.onRejectedCallbacks.forEach(cb => this.runAsync(cb, reason));
      }
    };

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

  // 模拟微任务队列，确保回调异步执行
  runAsync(callback, arg) {
    if (typeof queueMicrotask === 'function') {
      queueMicrotask(() => callback(arg));
    } else if (typeof MutationObserver === 'function') {
      // 浏览器环境，MutationObserver可以模拟微任务
      const observer = new MutationObserver(() => {
        callback(arg);
        observer.disconnect(); // 执行一次后断开
      });
      const node = document.createTextNode('');
      observer.observe(node, { characterData: true });
      node.data = 'trigger'; // 触发回调
    } else {
      setTimeout(() => callback(arg), 0); // 回退到宏任务
    }
  }

  then(onFulfilled, onRejected) {
    // 确保回调是函数，如果不是，则透传值或错误
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

    // 返回一个新的Promise，实现链式调用
    const promise2 = new MyPromise((resolve, reject) => {
      const handleCallback = (callback, arg) => {
        this.runAsync(() => {
          try {
            const x = callback(arg);
            // Promise解决过程：处理x的值
            this.resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      };

      if (this.state === FULFILLED) {
        handleCallback(onFulfilled, this.value);
      } else if (this.state === REJECTED) {
        handleCallback(onRejected, this.reason);
      } else if (this.state === PENDING) {
        // 如果Promise还在等待中，将回调存储起来
        this.onFulfilledCallbacks.push(value => handleCallback(onFulfilled, value));
        this.onRejectedCallbacks.push(reason => handleCallback(onRejected, reason));
      }
    });

    return promise2;
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  // 核心的Promise解决过程，处理then回调的返回值x
  resolvePromise(promise2, x, resolve, reject) {
    if (x === promise2) { // 防止循环引用
      return reject(new TypeError('Chaining cycle detected for promise'));
    }

    let called = false; // 防止多次调用resolve/reject

    if (x instanceof MyPromise) {
      // 如果x是一个Promise，那么promise2的状态取决于x的状态
      x.then(value => {
        if (called) return;
        called = true;
        this.resolvePromise(promise2, value, resolve, reject);
      }, reason => {
        if (called) return;
        called = true;
        reject(reason);
      });
    } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
      // 如果x是一个对象或函数，可能是thenable对象
      try {
        const then = x.then; // 尝试获取then方法
        if (typeof then === 'function') {
          // 如果then是函数，就调用它，并把promise2的resolve/reject传进去
          then.call(x, y => {
            if (called) return;
            called = true;
            this.resolvePromise(promise2, y, resolve, reject);
          }, r => {
            if (called) return;
            called = true;
            reject(r);
          });
        } else {
          // 如果没有then方法，或者then不是函数，就直接用x作为值
          resolve(x);
        }
      } catch (e) {
        if (called) return;
        called = true;
        reject(e);
      }
    } else {
      // 其他情况，直接用x作为值
      resolve(x);
    }
  }

  static resolve(value) {
    return new MyPromise(resolve => resolve(value));
  }

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

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument must be an array'));
      }
      let results = [];
      let counter = 0;
      let fulfilledCount = 0;

      if (promises.length === 0) {
        return resolve([]);
      }

      promises.forEach((promise, index) => {
        // 将非Promise值包装成Promise
        MyPromise.resolve(promise).then(value => {
          results[index] = value;
          fulfilledCount++;
          if (fulfilledCount === promises.length) {
            resolve(results);
          }
        }).catch(reason => {
          reject(reason); // 任何一个失败，all就失败
        });
      });
    });
  }

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument must be an array'));
      }
      if (promises.length === 0) {
        return; // race一个空数组不会有任何结果
      }
      promises.forEach(promise => {
        MyPromise.resolve(promise).then(resolve, reject); // 任何一个成功或失败，race就成功或失败
      });
    });
  }
}

// 示例用法
// const p1 = new MyPromise(resolve => setTimeout(() => resolve(1), 1000));
// const p2 = new MyPromise((_, reject) => setTimeout(() => reject('Error!'), 500));
// const p3 = MyPromise.resolve(3);

// MyPromise.all([p1, p3]).then(console.log).catch(console.error); // [1, 3] after 1s
// MyPromise.race([p1, p2]).then(console.log).catch(console.error); // Error! after 0.5s

登录后复制

自定义Promise如何精准模拟原生Promise的状态流转与链式调用机制？

立即学习“Java免费学习笔记（深入）”；

在我看来，要精准模拟Promise的状态流转，最关键的就是

state

登录后复制

这个内部变量，它只能从

PENDING

登录后复制

变为

FULFILLED

登录后复制

或

REJECTED

登录后复制

，而且一旦改变就不能再变。这个“不可逆”的特性是Promise可靠性的基石。在

resolve

登录后复制

和

reject

登录后复制

函数里，我们都加了

if (this.state === PENDING)

登录后复制

的判断，就是为了确保这一点。

至于链式调用，这完全是

then

登录后复制

方法的功劳。

then

登录后复制

方法每次被调用，都会返回一个新的

MyPromise

登录后复制

实例。这听起来有点反直觉，但正是这个新Promise，才让我们可以继续在其上调用

then

登录后复制

，形成一个无限的链条。当

then

登录后复制

的回调函数（

onFulfilled

登录后复制

或

onRejected

登录后复制

）执行时，它返回的值

登录后复制

，会经过一个非常重要的“Promise解决过程”（

resolvePromise

登录后复制

方法）。这个过程会判断

登录后复制

是什么类型：

如果
```
x
```
登录后复制
是当前的
```
promise2
```
登录后复制
本身，那肯定是个循环引用，直接报错。
如果
```
x
```
登录后复制
是一个
```
MyPromise
```
登录后复制
实例，那么
```
promise2
```
登录后复制
的状态就和
```
x
```
登录后复制
的状态保持一致，
```
x
```
登录后复制
成功，
```
promise2
```
登录后复制
就成功；
```
x
```
登录后复制
失败，
```
promise2
```
登录后复制
就失败。
如果
```
x
```
登录后复制
是一个拥有
```
then
```
登录后复制
方法的对象（即所谓的
```
thenable
```
登录后复制
对象），
```
resolvePromise
```
登录后复制
会尝试调用
```
x.then
```
登录后复制
，并把
```
promise2
```
登录后复制
的
```
resolve
```
登录后复制
和
```
reject
```
登录后复制
传进去，让
```
x
```
登录后复制
来决定
```
promise2
```
登录后复制
的最终状态。这块儿是处理与原生Promise或其他Promise库兼容性的关键。
如果
```
x
```
登录后复制
是其他任何值，
```
promise2
```
登录后复制
就会直接以
```
x
```
登录后复制
作为成功的值。

整个过程中，我们还用

runAsync

登录后复制

来模拟了微任务队列，确保

then

登录后复制

的回调总是在当前执行栈清空后才执行，这对于保持异步行为的正确性和可预测性至关重要。我个人觉得，如果没有这个异步调度，Promise的很多行为就和同步回调没什么区别了，那它存在的意义就大打折扣。

Promise.all

登录后复制

和

Promise.race

登录后复制

这些静态方法在polyfill中如何实现？

实现

Promise.all

登录后复制

和

Promise.race

登录后复制

，其实是对我们自定义

MyPromise

登录后复制

实例方法的一种高级应用。

GNU make 中文手册 pdf版

GNU makefile中文手册 pdf，文比较完整的讲述GNU make工具，涵盖GNU make的用法、语法。同时重点讨论如何为一个工程编写Makefile。阅读本书之前，读者应该对GNU的工具链和Linux的一些常用编程工具有一定的了解。诸如：gcc、as、ar、ld、yacc等本文比较完整的讲述GNU make工具，涵盖GNU make的用法、语法。重点讨论如何使用make来管理软件工程、以及如何为工程编写正确的Makefile。本手册不是一个纯粹的语言翻译版本，其中对GNU make的一些语法

查看详情

对于

MyPromise.all(promises)

登录后复制

：它接收一个Promise数组（或者更广义地说，是一个可迭代对象，其元素会被

MyPromise.resolve

登录后复制

包装成Promise）。它会返回一个新的

MyPromise

登录后复制

。这个新的Promise会在所有输入Promise都成功时才成功，并且成功的值是一个包含所有输入Promise成功值的数组，顺序与输入数组一致。但凡有一个输入Promise失败了，

MyPromise.all

登录后复制

就会立即失败，失败的原因就是第一个失败的Promise的错误原因。

我的实现思路是，创建一个结果数组，用一个计数器记录已经成功解决的Promise数量。每当一个Promise成功，就把它的结果存到对应索引的位置，并增加计数器。当计数器达到输入Promise的总数时，就

resolve

登录后复制

整个结果数组。如果任何一个Promise失败，我们直接

reject

登录后复制

整个

MyPromise.all

登录后复制

返回的Promise，并且不再关心其他Promise的结果。这里我特别注意了，输入数组中的非Promise值也需要通过

MyPromise.resolve

登录后复制

包装一下，这样才能统一处理。

对于

MyPromise.race(promises)

登录后复制

：它也接收一个Promise数组。它同样返回一个新的

MyPromise

登录后复制

。这个Promise会以输入数组中第一个解决（无论是成功还是失败）的Promise的结果作为自己的结果。也就是说，谁先跑完，谁就决定了

race

登录后复制

的结果。

MyPromise.race

登录后复制

的实现相对简单粗暴。我们遍历输入数组中的每一个Promise，然后把返回的

MyPromise

登录后复制

的

resolve

登录后复制

和

reject

登录后复制

直接绑定到这些输入Promise的

then

登录后复制

方法上。这样，只要有一个Promise率先成功或失败，它就会触发

MyPromise.race

登录后复制

返回的Promise的相应状态改变，而其他Promise的结果就不再重要了。我个人觉得，

race

登录后复制

的魅力就在于它的“抢跑”机制，非常适合需要设置超时或者只取最快结果的场景。

在不同JavaScript环境中，如何确保Promise polyfill的兼容性和性能？

确保Promise polyfill在不同JavaScript环境中的兼容性和性能，这绝对是个挑战，特别是要兼顾那些老旧的浏览器或者Node.js版本。

首先是环境检测。在应用我们的polyfill之前，我们通常会检查全局的

Promise

登录后复制

对象是否存在，或者它的实现是否完整。比如，

if (typeof Promise === 'undefined' || !Promise.prototype.finally)

登录后复制

这样的判断，可以决定是否需要加载和应用我们的

MyPromise

登录后复制

。

其次，微任务队列的模拟是重中之重。原生Promise的

then

登录后复制

回调是异步的，并且是微任务。在现代浏览器和Node.js中，我们可以直接使用

queueMicrotask

登录后复制

。但对于老旧环境，这个API可能不存在。我的

runAsync

登录后复制

方法里就展示了这种降级策略：

queueMicrotask
登录后复制
：这是首选，性能最好，语义最接近原生。
MutationObserver
登录后复制
：在浏览器环境中，
```
MutationObserver
```
登录后复制
是一个非常好的微任务模拟方案。通过观察一个文本节点的修改，可以触发一个微任务级别的回调。它的性能比
```
setTimeout(0)
```
登录后复制
好得多。
setTimeout(0)
登录后复制
：这是最后的兜底方案。它会把回调放入宏任务队列，虽然能保证异步，但执行时机比微任务晚，可能会导致一些时序问题，性能也相对差一些。但对于一些非常老旧的环境，这可能是唯一的选择。