Promise 实现的终极分析，两种思路极致剖析！

2023-09-25 11:52:16

Promise 作为 JavaScript 中异步编程的解决方案，通过链式调用解决回调地狱，是前端面试中的考点，也是前端的基本功。本文将从 Promise 的使用方式入手，一步步剖析其原理，帮助大家封装出自己的 Promise。

Promise 的使用

Promise 最初的概念是为 JavaScript 提供一种更好的异步编程解决方案，消除回调函数中常见的“回调地狱”现象。使用 Promise 时，您首先需要创建一个 Promise 对象，然后调用 resolve() 或 reject() 方法来完成 Promise。

以下是一个简单的 Promise 使用示例：

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    // 成功时调用 resolve()
    resolve('成功');
  }, 1000);
});

// 调用 then() 方法添加回调函数
promise.then((result) => {
  // Promise 成功时执行
  console.log('成功：', result);
}, (error) => {
  // Promise 失败时执行
  console.log('失败：', error);
});

在上面的示例中，我们创建了一个 Promise 对象并调用 then() 方法来添加两个回调函数。一个回调函数用于处理 Promise 成功时的结果，另一个回调函数用于处理 Promise 失败时的错误。

Promise 的原理

为了理解 Promise 的工作原理，我们需要深入了解其内部实现。Promise 对象包含三个状态：pending、fulfilled 和 rejected。

pending： 当 Promise 对象刚创建时，它的状态为 pending。
fulfilled： 当 Promise 对象成功完成时，它的状态变为 fulfilled。
rejected： 当 Promise 对象失败时，它的状态变为 rejected。

Promise 对象还包含两个回调函数队列，一个用于成功回调函数，另一个用于失败回调函数。当 Promise 对象的状态发生变化时，相应的回调函数队列中的函数将被执行。

以下是如何一步步实现 Promise 的：

创建一个 Promise 对象并将其状态设为 pending。
提供 resolve() 和 reject() 方法来完成 Promise。
当 Promise 成功完成时，调用 resolve() 方法并将结果作为参数传递给它。
当 Promise 失败时，调用 reject() 方法并将错误作为参数传递给它。
为 Promise 添加回调函数队列，一个用于成功回调函数，另一个用于失败回调函数。
当 Promise 的状态发生变化时，相应的回调函数队列中的函数将被执行。

封装自己的 Promise

现在，我们已经了解了 Promise 的工作原理，就可以封装自己的 Promise 了。以下是如何实现一个简单的 Promise 类：

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

    // 立即执行executor函数
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error);
    }
  }

  resolve(result) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.result = result;

    // 执行成功回调函数
    this.successCallbacks.forEach((callback) => {
      callback(result);
    });
  }

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

    this.state = 'rejected';
    this.result = error;

    // 执行失败回调函数
    this.failureCallbacks.forEach((callback) => {
      callback(error);
    });
  }

  then(successCallback, failureCallback) {
    if (this.state === 'fulfilled') {
      successCallback(this.result);
    } else if (this.state === 'rejected') {
      failureCallback(this.result);
    } else {
      // Promise 状态为 pending 时，将回调函数添加到队列中
      this.successCallbacks.push(successCallback);
      this.failureCallbacks.push(failureCallback);
    }

    return this;
  }
}