当前位置：首页 > article >正文

手写 Promise 的实现

article 2025/3/11 8:04:33

什么是 Promise

Promise 是一个类。

当通过new Promise创建一个实例时，需要传入一个回调函数，我们称之为 executor。

这个回调函数会被立即执行，并传入两个回调函数的参数 (resolve, reject)。
当调用 resolve 回调函数时，会执行 Promise 对象的 then 方法传入的回调。
当调用 reject 回调函数时，会执行 Promise 对象的 catch 方法传入的回调。

Promise 是一个状态机制，它有3种状态：

pending：待定状态，执行 executor 后，处于这个状态。
fulfilled：兑现状态，调用 resolve() 后，Promise 的状态更改为 fulfilled，并且无法再次更改。
rejected：拒绝状态，调用 reject() 后，Promise 的状态更改为 rejected，并且无法再次更改。

手写一个 Promise 编程

// 定义一个Promise的类
class newPromise {
  constructor(executor = () => { }) {
    // 执行构造函数，并把状态值设置为pending
    this.state = STATUS_PENGINDING; // 初始状态
    this.value = null;  // 成功的返回值
    this.reason = null; // 失败的返回值

    // resolve 需要接收一个参数
    const resolve = (value) => {
      // 防止重复执行，表示状态不可逆
      // 只有状态是 pending 时，才会改变执行改变状态
      // 执行 resolve 后，状态值变成 fulfilled
      if (this.state === STATUS_PENGINDING) {
        this.state = STATUS_FULFILLED;
        this.value = value;
      }
    }

    // reject 需要接收一个参数
    const reject = (reason) => {
      // 防止重复执行，表示状态不可逆
      // 只有状态是 pending 时，才会改变执行改变状态
      // 执行 reject 后，状态值变成 rejected
      if (this.state === STATUS_PENGINDING) {
        this.state = STATUS_REJECTED;
        this.reason = reason;
      }
    }

    // 传入的回调会返回两个参数 resolve 和 reject
    executor(resolve, reject);
  }

  // then接收两个回调，分别用于处理成功和失败
  then(onFulfilled, onRejected) {
    // 穿透就是没有方法，则给一个默认的方法，将值传下去
    if (onFulfilled && typeof onFulfilled === 'function') {
      onFulfilled(this.value);
    }
    if (onRejected && typeof onRejected === 'function') {
      onRejected(this.reason);
    }
  }
}

// 执行上面定义的方法
new newPromise((resolve, reject) => {
  // 这两个状态只能二选一
  // resolve('成功返回值');
  reject('失败返回值');
}).then(
  res => {
    console.log('成功的', res);
  },
  err => {
    console.log('失败的', err);
  }
);