promise js 实现

Promise 的基本实现

Promise 是 JavaScript 中处理异步操作的一种机制。以下是一个简单的 Promise 实现示例，展示了其核心功能，包括状态管理、then 方法和异步支持。

class MyPromise {
  constructor(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(callback => callback());
      }
    };

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

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

  then(onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
}

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

  if (x instanceof MyPromise) {
    x.then(resolve, reject);
  } else {
    resolve(x);
  }
}

使用示例

const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

p.then((value) => {
  console.log(value); // Output: Success
  return 'Next Value';
}).then((value) => {
  console.log(value); // Output: Next Value
});

关键点说明

1. 状态管理
   Promise 有三种状态：pending、fulfilled 和 rejected。状态只能从 pending 转换为 fulfilled 或 rejected，且不可逆。

2. 异步支持
   通过 setTimeout 确保 then 回调的异步执行，符合 Promise/A+ 规范。

3. 链式调用
   then 方法返回一个新的 Promise，支持链式调用。resolvePromise 函数处理返回值，确保链式调用的正确性。

4. 错误处理
   在 executor 和 then 回调中捕获错误，并通过 reject 传递。

扩展方法

以下是一些常见的扩展方法实现，如 catch 和 finally。

class MyPromise {
  // ... 其他代码同上 ...

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

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

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

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

静态方法实现

实现 Promise.all 和 Promise.race 等静态方法。

class MyPromise {
  // ... 其他代码同上 ...

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completed = 0;

      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          value => {
            results[index] = value;
            completed++;
            if (completed === promises.length) {
              resolve(results);
            }
          },
          reject
        );
      });
    });
  }

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

注意事项

1. 兼容性
   上述实现是一个简化版本，未完全覆盖 Promise/A+ 规范的所有细节。生产环境应使用原生 Promise 或成熟的库（如 Bluebird）。

2. 性能优化
   实际实现中需考虑更多边界条件和性能优化，例如微任务队列（queueMicrotask）替代 setTimeout。

3. 测试验证
   使用 Promise/A+ 测试套件（如 promises-aplus-tests）验证实现的合规性。