揭开 Promise 的神秘面纱：深入剖析源代码，为你指引光明

2024-02-01 04:31:25

深入解析 Promise：JavaScript 中处理异步的利器

Promise 的起源

在 JavaScript 的世界中，异步编程是一个不可忽视的领域。为了解决回调地狱的困扰，Promise 应运而生。它为我们提供了一种更优雅的方式来处理异步操作，提升代码的可读性和可维护性。

Promise 的内在机制

要深入理解 Promise，我们不妨一探其源代码。Promise 的定义如下：

function Promise(executor) {
  this._state = 'pending';
  this._value = undefined;
  this._reason = undefined;
  this._onFulfilledCallbacks = [];
  this._onRejectedCallbacks = [];

  try {
    executor(resolve.bind(this), reject.bind(this));
  } catch (e) {
    reject.call(this, e);
  }
}

在这个定义中，我们可以看到 Promise 的几个关键属性：

_state ：表示 Promise 的状态，可以是 'pending'、'fulfilled' 或 'rejected'。
_value ：保存着 Promise 兑现后的值。
_reason ：保存着 Promise 拒绝的原因。
_onFulfilledCallbacks 和 _onRejectedCallbacks ：分别保存着 Promise 兑现和拒绝时的回调函数。

此外，Promise 提供了几种实用的方法，包括：

then ：用于注册 Promise 兑现和拒绝时的回调函数。
catch ：等同于 then(null, callback)，用于注册 Promise 拒绝时的回调函数。
finally ：用于注册 Promise 兑现或拒绝时都会触发的回调函数。
resolve ：用于兑现 Promise，将 Promise 的状态置为 'fulfilled'，并用给定的值填充 _value 属性。
reject ：用于拒绝 Promise，将 Promise 的状态置为 'rejected'，并用给定的值填充 _reason 属性。

Promise 的妙用

使用 Promise 非常简单。以下是一个示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出: 'Hello, world!'
});