Promise：一步步构建指南

前端

2023-11-23 06:15:08

Promise 的构建之路：掌握异步编程的秘密

了解 Promise 的本质

在当今快速发展的应用程序世界中，异步操作无处不在。传统的回调地狱模式让代码杂乱不堪，难以维护。Promise 横空出世，以其优雅的语法和强大的功能，彻底改变了异步编程的方式。

Promise 是一个未来结果的占位符，它允许你以同步的方式处理异步操作。你可以通过 .then() 和 .catch() 方法分别处理成功和失败的情况，从而简化代码并提高可读性。

构建 Promise 的核心步骤

要构建自己的 Promise，你需要遵循以下步骤：

1. 定义 Promise 构造函数

function Promise(executor) {
  // 初始化状态和结果
  this._state = 'pending';
  this._result = undefined;

  // 注册成功和失败回调
  const resolve = (value) => this._resolve(value);
  const reject = (error) => this._reject(error);

  // 执行 executor 函数
  executor(resolve, reject);
}

2. 设置私有状态管理方法

_resolve(value) {
  // 检查状态，避免重复调用
  if (this._state !== 'pending') return;

  // 更改状态并保存结果
  this._state = 'fulfilled';
  this._result = value;

  // 通知已注册的回调
  this._resolveCallbacks.forEach((cb) => cb(value));
}

_reject(error) {
  // 检查状态，避免重复调用
  if (this._state !== 'pending') return;

  // 更改状态并保存错误
  this._state = 'rejected';
  this._result = error;

  // 通知已注册的回调
  this._rejectCallbacks.forEach((cb) => cb(error));
}

3. 添加回调处理

then(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    // 将回调添加到 Promise 实例
    this._resolveCallbacks.push(onFulfilled);
    this._rejectCallbacks.push(onRejected);

    // 考虑已经完成的 Promise
    if (this._state === 'fulfilled') {
      // 立即执行成功回调
      setTimeout(() => onFulfilled(this._result), 0);
    } else if (this._state === 'rejected') {
      // 立即执行失败回调
      setTimeout(() => onRejected(this._result), 0);
    }
  });
}

实战演练

const myPromise = new Promise((resolve, reject) => {
  // 异步操作（例如网络请求）
  setTimeout(() => resolve('成功！'), 1000);
});

myPromise.then(
  (result) => {
    // 成功回调
    console.log(`结果：${result}`);
  },
  (error) => {
    // 失败回调
    console.log(`错误：${error}`);
  }
);