由浅入深实现一个属于你自己的 Promise

在当今快速发展的技术世界中，理解和掌握异步编程变得至关重要。Promise 是 JavaScript 中一种强大的工具，它使我们能够以优雅而高效的方式处理异步操作。本文将带你踏上一段由浅入深的旅程，一步步教你实现自己的 Promise。

序幕：异步编程与 Promise

异步编程允许我们在不阻塞主线程的情况下执行操作。在 JavaScript 中，回调函数是处理异步操作的传统方法。然而，回调函数嵌套可能会导致代码难以理解和维护。这就是 Promise 应运而生的原因。

第 1 步：Promise 的基本概念

一个 Promise 表示一个异步操作的最终完成或失败状态。它有三个状态：等待（pending）、已完成（fulfilled）和已拒绝（rejected）。当操作成功完成后，Promise 会被标记为已完成，并提供一个结果值。如果操作失败，则 Promise 会被标记为已拒绝，并提供一个错误对象。

第 2 步：创建和使用 Promise

使用 new Promise() 构造函数创建 Promise。它接收一个执行器函数作为参数，该函数接收两个回调函数作为参数：resolve 和 reject。resolve 用于将 Promise 标记为已完成，reject 用于将 Promise 标记为已拒绝。

const myPromise = new Promise((resolve, reject) => {
  // 在此处执行异步操作
  if (成功) {
    resolve(结果值);
  } else {
    reject(错误对象);
  }
});

第 3 步：处理 Promise

一旦创建了 Promise，我们可以使用 then() 方法处理其结果。then() 方法接收两个回调函数作为参数：onFulfilled 和 onRejected。onFulfilled 在 Promise 已完成时执行，onRejected 在 Promise 已拒绝时执行。

myPromise.then(onFulfilled, onRejected);

第 4 步：Promise 链

Promise 可以连接成链，使我们能够顺序处理多个异步操作。在 then() 方法中返回一个新的 Promise 可以将 Promise 链起来。

myPromise.then(result => {
  return new Promise(...);
}).then(...);

第 5 步：Promise 的优势

Promise 提供了以下优势：

• 提高代码可读性和可维护性
• 消除回调函数嵌套
• 改进错误处理
• 支持异步操作的顺序执行

第 6 步：实现自己的 Promise

以下是用约 150 行代码实现自己的 Promise 的示例：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach(callback => callback(value));
    };

    const reject = (error) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach(callback => callback(error));
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.result);
    } else if (this.state === 'rejected') {
      onRejected(this.result);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  }
}

结语

通过遵循这些步骤并利用提供的示例，你可以理解和实现自己的 Promise。掌握 Promise 是成为一名熟练的 JavaScript 开发人员的关键一步，它使你能够优雅而高效地处理异步操作，并编写更可维护和可读的代码。