25行代码实现Promise函数：深入浅出，通俗易懂

2023-10-24 16:54:08

理解Promise

Promise是一个对象，它代表一个即将完成或已经完成的异步操作。我们可以使用Promise来处理异步操作的结果，并在操作完成后执行相应的回调函数。

Promise有三种状态：

待定（Pending）：表示操作还没有完成。
已完成（Fulfilled）：表示操作已经成功完成，并带有结果值。
已拒绝（Rejected）：表示操作已经失败，并带有错误信息。

实现Promise函数

现在，我们来实现一个Promise函数。这个函数将接受一个函数作为参数，这个函数将执行异步操作。Promise函数将返回一个Promise对象，我们可以使用这个对象来处理异步操作的结果。

function Promise(executor) {
  // 初始状态为待定
  this.state = 'pending';
  // 结果值
  this.result = undefined;
  // 错误信息
  this.error = undefined;
  // 成功回调函数队列
  this.onFulfilledCallbacks = [];
  // 失败回调函数队列
  this.onRejectedCallbacks = [];

  // 执行器函数
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

  // resolve函数，用于将Promise的状态从待定改为已完成
  function resolve(value) {
    if (this.state === 'pending') {
      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach((callback) => {
        callback(value);
      });
    }
  }

  // reject函数，用于将Promise的状态从待定改为已拒绝
  function reject(error) {
    if (this.state === 'pending') {
      this.state = 'rejected';
      this.error = error;
      this.onRejectedCallbacks.forEach((callback) => {
        callback(error);
      });
    }
  }
}

使用Promise函数

现在，我们已经实现了Promise函数，我们可以使用它来处理异步操作。

// 创建一个Promise对象
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('成功');
    } else {
      reject('失败');
    }
  }, 1000);
});

// 添加成功回调函数
promise.then((result) => {
  console.log(result); // 输出：成功
});

// 添加失败回调函数
promise.catch((error) => {
  console.log(error); // 输出：失败
});