以直观方式深刻理解 Promise 实现方式

2024-02-23 08:56:06

作为一名 Javascript 开发人员，对 Promise 对象应该不陌生，它被广泛应用于异步操作，用来处理复杂或耗时的任务。如果您想知道 Promise 的实现方式，那么您来对了，我们以一种直观易懂的方式剖析 Promise 的底层机制，让您能够清晰理解其内部运作原理。

Promise 的本质

Promise 本质上是一个对象，它包含三种状态：等待中、已成功和已失败。这些状态之间存在着明确的转换关系，例如，等待中的 Promise 可以转换到已成功或已失败状态，但已成功或已失败的 Promise 则不能再转换到其他状态。

Promise 的实现方式

Promise 的实现方式通常涉及两个函数：executor 和 then。

executor：当创建一个 Promise 实例时，需要传入一个 executor 函数，该函数包含两个参数 resolve 和 reject，它们分别用于将 Promise 的状态更改为已成功或已失败。
then：then 是一个方法，它可以接收两个参数，分别是成功的回调函数和失败的回调函数。当 Promise 的状态改变时，会调用相应的回调函数。

Promise 的状态变化

Promise 的状态变化可以分为以下几个步骤：

当创建一个 Promise 实例时，它的状态为等待中。
当调用 resolve 时，Promise 的状态会从等待中变为已成功。
当调用 reject 时，Promise 的状态会从等待中变为已失败。
Promise 的状态一旦改变，就无法再改变。

示例代码

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出 "成功"
}, (error) => {
  console.log(error);
});

上面的示例代码中，我们创建了一个 Promise 实例并传入了一个 executor 函数。在 executor 函数中，我们使用 setTimeout 模拟一个异步操作，并将 "成功" 作为成功的结果。然后，我们使用 then 方法来注册两个回调函数，分别用于处理成功的回调和失败的回调。当 setTimeout 完成时，Promise 的状态会从等待中变为已成功，此时会调用成功的回调函数，并在控制台中输出 "成功"。