深入理解 Promise 如何解决回调地狱

前端

2023-12-21 12:05:18

在 JavaScript 中，异步编程一直是一个令人头疼的问题，回调函数层层嵌套，导致代码可读性和可维护性都非常差，这就是臭名昭著的“回调地狱”。

为了解决这个问题，Promise 应运而生。Promise 是一种异步编程的解决方案，它允许我们以一种更优雅的方式来处理异步操作。

Promise 如何运作？

Promise 是一个对象，它表示一个异步操作的最终完成或失败。当一个 Promise 被创建时，它会处于“pending”状态。这意味着异步操作尚未完成，Promise 的最终状态（成功或失败）尚未确定。

当异步操作完成后，Promise 会调用其 .resolve() 或 .reject() 方法来更新其状态。.resolve() 方法表示异步操作成功完成，.reject() 方法表示异步操作失败。

一旦 Promise 的状态更新为“fulfilled”或“rejected”，它就会调用其相应的处理程序。处理程序是一个函数，它将在 Promise 的状态更新后被执行。

Promise 如何解决回调地狱？

Promise 通过引入一种新的编程范式来解决回调地狱的问题。这种范式被称为“链式调用”。

链式调用允许我们以一种更直观的方式来处理异步操作。我们可以使用 .then() 方法将多个异步操作串联起来，形成一个异步操作链。

例如，以下代码使用 Promise 来处理一个异步文件读取操作：

readFile('file.txt').then(function(data) {
  console.log(data);
});

在这个例子中，我们使用 readFile() 方法来读取一个文件。readFile() 方法返回一个 Promise，它表示文件读取操作的最终完成或失败。

当文件读取操作完成后，readFile() 方法会调用其 .resolve() 方法来更新 Promise 的状态为“fulfilled”。这会导致 .then() 方法中的处理程序被执行。

在处理程序中，我们可以访问文件的内容。我们使用 console.log() 方法来打印文件的内容。

手写一个 Promise

实现一个 Promise 的基本步骤如下：

创建一个 Promise 对象。
在 Promise 对象中定义 .resolve() 和 .reject() 方法。
在异步操作完成后，调用 .resolve() 或 .reject() 方法来更新 Promise 的状态。
使用 .then() 方法来添加处理程序。

以下代码演示了如何手写一个 Promise：

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

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

  resolve(value) {
    if (this.state === 'pending') {
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach(callback => callback(this.value));
    }
  }

  reject(reason) {
    if (this.state === 'pending') {
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(callback => callback(this.reason));
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this.onFulfilledCallbacks.push(() => {
        try {
          const value = onFulfilled(this.value);
          resolve(value);
        } catch (err) {
          reject(err);
        }
      });

      this.onRejectedCallbacks.push(() => {
        try {
          const reason = onRejected(this.reason);
          resolve(reason);
        } catch (err) {
          reject(err);
        }
      });
    });
  }
}