Topwo博客-Promise实现原理，便于理解Promise

您现在的位置是：Topwo博客>>JavaScript文章

Promise实现原理，便于理解Promise

发布时间：2021-11-09作者：Topwo来源：原创点击：445

```javascript
/**
 * 自定义 Promise 实现，遵循 Promise/A+ 规范
 * 包含 Promise 的核心功能和常用静态方法
 */
class MyPromise {
  /**
   * 构造函数，初始化 Promise 状态
   * @param {Function} executor - 执行器函数，接收 resolve 和 reject 两个参数
   */
  constructor(executor) {
    // Promise 初始状态为 pending
    this.state = 'pending';
    // 成功时的值，初始为 undefined
    this.value = undefined;
    // 失败时的原因，初始为 undefined
    this.reason = undefined;
    // 存储成功回调的队列（用于异步场景）
    this.onFulfilledCallbacks = [];
    // 存储失败回调的队列（用于异步场景）
    this.onRejectedCallbacks = [];

/**
     * 将 Promise 状态从 pending 变为 fulfilled
     * @param {any} value - 成功时传递的值
     */
    const resolve = (value) => {
      // 状态只能变更一次，从 pending 到 fulfilled
      if (this.state === 'pending') {
        // 处理 Promise 嵌套的情况
        if (value instanceof MyPromise) {
          // 递归解析嵌套的 Promise
          value.then(resolve, reject);
          return;
        }
        this.state = 'fulfilled';
        this.value = value;
        // 执行所有存储的成功回调
        this.onFulfilledCallbacks.forEach((callback) => callback());
      }
    };

/**
     * 将 Promise 状态从 pending 变为 rejected
     * @param {any} reason - 失败时传递的原因
     */
    const reject = (reason) => {
      // 状态只能变更一次，从 pending 到 rejected
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 执行所有存储的失败回调
        this.onRejectedCallbacks.forEach((callback) => callback());
      }
    };

// 执行 executor 函数，传入 resolve 和 reject
    // 捕获 executor 同步抛出的错误
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

/**
   * 添加成功和失败回调，返回一个新的 Promise
   * @param {Function} onFulfilled - 成功回调函数
   * @param {Function} onRejected - 失败回调函数
   * @returns {MyPromise} - 返回一个新的 Promise 实例
   */
  then(onFulfilled, onRejected) {
    // 确保回调是函数，如果不是则设置默认值
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };

return new MyPromise((resolve, reject) => {
      /**
       * 处理成功回调的内部函数
       */
      const handleFulfilled = () => {
        try {
          // 执行成功回调并获取结果
          const result = onFulfilled(this.value);
          // 将结果传递给新 Promise 的 resolve（实现链式调用）
          // 如果结果是 Promise，则等待其完成
          if (result instanceof MyPromise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (error) {
          // 捕获回调中的错误并传递给新 Promise 的 reject
          reject(error);
        }
      };

/**
       * 处理失败回调的内部函数
       */
      const handleRejected = () => {
        try {
          // 执行失败回调并获取结果
          const result = onRejected(this.reason);
          // 将结果传递给新 Promise 的 resolve（允许错误恢复）
          // 如果结果是 Promise，则等待其完成
          if (result instanceof MyPromise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (error) {
          // 捕获回调中的错误并传递给新 Promise 的 reject
          reject(error);
        }
      };

// 如果 Promise 已经是 fulfilled 状态，异步执行成功回调
      if (this.state === 'fulfilled') {
        // 使用 setTimeout 确保异步执行
        setTimeout(handleFulfilled, 0);
      } 
      // 如果 Promise 已经是 rejected 状态，异步执行失败回调
      else if (this.state === 'rejected') {
        // 使用 setTimeout 确保异步执行
        setTimeout(handleRejected, 0);
      } 
      // 如果 Promise 还是 pending 状态，存储回调函数
      // 等待状态变更后再执行
      else {
        // 存储回调函数，状态变更时执行
        this.onFulfilledCallbacks.push(() => setTimeout(handleFulfilled, 0));
        this.onRejectedCallbacks.push(() => setTimeout(handleRejected, 0));
      }
    });
  }

/**
   * 添加失败回调的便捷方法，等价于 then(null, onRejected)
   * @param {Function} onRejected - 失败回调函数
   * @returns {MyPromise} - 返回一个新的 Promise 实例
   */
  catch(onRejected) {
    return this.then(null, onRejected);
  }

/**
   * 添加无论成功或失败都会执行的回调
   * @param {Function} callback - 回调函数
   * @returns {MyPromise} - 返回一个新的 Promise 实例
   */
  finally(callback) {
    return this.then(
      (value) => MyPromise.resolve(callback()).then(() => value),
      (reason) => MyPromise.resolve(callback()).then(() => { throw reason; })
    );
  }

/**
   * 创建一个已成功的 Promise
   * @param {any} value - 成功的值
   * @returns {MyPromise} - 已成功的 Promise
   */
  static resolve(value) {
    // 如果 value 是 Promise，直接返回
    if (value instanceof MyPromise) {
      return value;
    }
    // 否则创建一个新的 Promise 并立即 resolve
    return new MyPromise((resolve) => resolve(value));
  }

/**
   * 创建一个已失败的 Promise
   * @param {any} reason - 失败的原因
   * @returns {MyPromise} - 已失败的 Promise
   */
  static reject(reason) {
    // 直接创建一个已 rejected 的 Promise
    return new MyPromise((_, reject) => reject(reason));
  }

/**
   * 并行执行多个 Promise，全部成功则返回结果数组
   * 任一失败则立即返回该失败
   * @param {Array} iterable - 可迭代对象，包含多个 Promise
   * @returns {MyPromise} - 返回一个新的 Promise
   */
  static all(iterable) {
    return new MyPromise((resolve, reject) => {
      // 检查参数是否为数组
      if (!Array.isArray(iterable)) {
        return reject(new TypeError('参数必须是数组'));
      }

const results = new Array(iterable.length);
      let completedCount = 0;

// 处理空数组的情况
      if (iterable.length === 0) {
        return resolve(results);
      }

// 遍历所有 Promise
      iterable.forEach((promise, index) => {
        // 将每个元素转换为 Promise
        MyPromise.resolve(promise).then(
          (value) => {
            // 存储结果到对应位置
            results[index] = value;
            completedCount++;
            // 所有 Promise 都成功时，resolve 结果数组
            if (completedCount === iterable.length) {
              resolve(results);
            }
          },
          (reason) => {
            // 任一 Promise 失败，立即 reject
            reject(reason);
          }
        );
      });
    });
  }

/**
   * 多个 Promise 竞争，返回第一个完成（成功或失败）的结果
   * @param {Array} iterable - 可迭代对象，包含多个 Promise
   * @returns {MyPromise} - 返回一个新的 Promise
   */
  static race(iterable) {
    return new MyPromise((resolve, reject) => {
      // 检查参数是否为数组
      if (!Array.isArray(iterable)) {
        return reject(new TypeError('参数必须是数组'));
      }

// 遍历所有 Promise
      iterable.forEach((promise) => {
        // 将每个元素转换为 Promise
        MyPromise.resolve(promise).then(
          (value) => {
            // 第一个完成的 Promise 成功，立即 resolve
            resolve(value);
          },
          (reason) => {
            // 第一个完成的 Promise 失败，立即 reject
            reject(reason);
          }
        );
      });
    });
  }

/**
   * 并行执行多个 Promise，等待所有完成（无论成功或失败）
   * 返回包含每个 Promise 状态和结果的数组
   * @param {Array} iterable - 可迭代对象，包含多个 Promise
   * @returns {MyPromise} - 返回一个新的 Promise
   */
  static allSettled(iterable) {
    return new MyPromise((resolve) => {
      // 检查参数是否为数组
      if (!Array.isArray(iterable)) {
        return resolve([]);
      }

const results = new Array(iterable.length);
      let completedCount = 0;

// 处理空数组的情况
      if (iterable.length === 0) {
        return resolve(results);
      }

// 遍历所有 Promise
      iterable.forEach((promise, index) => {
        // 将每个元素转换为 Promise
        MyPromise.resolve(promise)
          .then(
            (value) => {
              // 存储成功结果
              results[index] = { status: 'fulfilled', value };
            },
            (reason) => {
              // 存储失败结果
              results[index] = { status: 'rejected', reason };
            }
          )
          .finally(() => {
            // 无论成功或失败，计数并检查是否全部完成
            completedCount++;
            if (completedCount === iterable.length) {
              resolve(results);
            }
          });
      });
    });
  }

/**
   * 返回第一个成功的 Promise 结果
   * 若所有都失败，则抛出包含所有错误的 AggregateError
   * @param {Array} iterable - 可迭代对象，包含多个 Promise
   * @returns {MyPromise} - 返回一个新的 Promise
   */
  static any(iterable) {
    return new MyPromise((resolve, reject) => {
      // 检查参数是否为数组
      if (!Array.isArray(iterable)) {
        return reject(new TypeError('参数必须是数组'));
      }

const errors = [];
      let rejectedCount = 0;

// 处理空数组的情况
      if (iterable.length === 0) {
        return reject(new AggregateError('All promises were rejected'));
      }

// 遍历所有 Promise
      iterable.forEach((promise, index) => {
        // 将每个元素转换为 Promise
        MyPromise.resolve(promise).then(
          (value) => {
            // 任一 Promise 成功，立即 resolve
            resolve(value);
          },
          (reason) => {
            // 存储失败原因
            errors[index] = reason;
            rejectedCount++;
            // 所有 Promise 都失败时，reject 所有错误
            if (rejectedCount === iterable.length) {
              reject(new AggregateError(errors, 'All promises were rejected'));
            }
          }
        );
      });
    });
  }
}
```

上一篇：Java驼峰风格、下划线风格互转

下一篇：JS中的扩展运算符（...）和剩余运算符（...）