Promise(2)：从零开始构建Promise

前端

2024-01-01 12:41:11

前言

在现代的JavaScript开发中，异步编程是一个必不可少的技能。Promise作为一种异步编程的解决方案，因其易于使用、可读性高和可组合性强等优点，被广泛应用于各种场景中。

Promise是什么？

Promise是一个表示异步操作的最终完成或失败的对象。它提供了一个简单的接口，允许我们对异步操作的结果进行处理。Promise有三种状态：

Pending ：初始状态，表示异步操作尚未完成。
Fulfilled ：成功状态，表示异步操作已完成并且成功。
Rejected ：失败状态，表示异步操作已完成但失败。

Promise的构造函数

Promise的构造函数接受一个函数作为参数，该函数有两个参数：

resolve ：当异步操作成功时调用的函数，并将结果作为参数传递。
reject ：当异步操作失败时调用的函数，并将错误原因作为参数传递。

在构造函数内部，我们可以将异步操作封装在一个try-catch块中，并在try块中调用resolve函数，在catch块中调用reject函数。

function Promise(executor) {
  this.state = 'pending';
  this.value = undefined;
  this.reason = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  const resolve = (value) => {
    if (this.state !== 'pending') return;
    this.state = 'fulfilled';
    this.value = value;
    this.onFulfilledCallbacks.forEach((callback) => callback(value));
  };

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

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

Promise的实例方法

Promise实例提供了一些方法，包括：

then ：用于添加回调函数，当Promise状态改变时执行。
catch ：用于添加回调函数，当Promise状态变为rejected时执行。
finally ：无论Promise状态如何，都会执行的回调函数。

promise.then((value) => {
  // 处理成功的结果
}, (reason) => {
  // 处理失败的原因
});

promise.catch((reason) => {
  // 处理失败的原因
});

promise.finally(() => {
  // 无论Promise状态如何，都会执行的回调函数
});

Promise的静态方法

Promise还提供了一些静态方法，包括：

resolve ：创建一个resolved的Promise对象。
reject ：创建一个rejected的Promise对象。
all ：将多个Promise对象组合在一起，当所有Promise对象都resolved时，返回一个resolved的Promise对象，否则返回一个rejected的Promise对象。
race ：将多个Promise对象组合在一起，当其中一个Promise对象resolved或rejected时，返回该Promise对象，否则返回一个pending的Promise对象。

Promise.resolve(value).then((value) => {
  // 处理成功的结果
});

Promise.reject(reason).catch((reason) => {
  // 处理失败的原因
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  // 处理所有Promise对象成功的结果
}, (reason) => {
  // 处理任何一个Promise对象失败的原因
});

Promise.race([promise1, promise2, promise3]).then((value) => {
  // 处理第一个Promise对象成功或失败的结果
});