从零构建一个 Promise

2024-12-31 08:37:05   小编

从零构建一个 Promise

在 JavaScript 中,Promise 是一种强大的异步编程解决方案,它帮助我们更优雅地处理异步操作和回调地狱问题。让我们从零开始构建一个简单的 Promise 实现。

定义一个 MyPromise 类。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state ='resolved';
        this.value = value;
        this.callbacks.forEach(callback => callback.onResolved(value));
      }
    };

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

    executor(resolve, reject);
  }

  then(onResolved, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state ==='resolved') {
        try {
          const result = onResolved(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else if (this.state ==='rejected') {
        try {
          const result = onRejected(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else {
        this.callbacks.push({ onResolved, onRejected });
      }
    });
  }
}

在上述代码中,MyPromise 类的构造函数接受一个执行器函数 executor,它会立即执行,并传入两个函数 resolvereject 用于改变 Promise 的状态和值。

then 方法用于注册成功和失败的回调函数,并根据当前 Promise 的状态来决定是否立即执行回调。

通过这样简单的实现,我们已经初步构建了一个具有基本功能的 Promise。在实际应用中,还可以进一步扩展和优化,比如添加 catch 方法处理错误、实现多个 then 链的正确处理等。

从零构建 Promise 有助于我们更深入地理解其工作原理和内部机制,从而在开发中更灵活地运用异步编程。希望这个简单的示例能为您开启探索 Promise 的大门。

TAGS: JavaScript Promise 构建 从零开始学 Promise Promise 开发指南 构建自定义 Promise

欢迎使用万千站长工具!

Welcome to www.zzTool.com