谈论 Promise 和如何实现它们：超越Callback Hell

前端

2023-11-20 06:24:22

在软件开发的世界中，我们经常需要处理异步操作，也就是那些需要一段时间才能完成的操作。在 JavaScript 中，我们传统上使用回调函数来处理异步操作。然而，回调函数很容易导致代码混乱和难以维护，这就是 Promise 诞生的原因。

Promise 是一种 JavaScript 对象，它代表着异步操作的最终完成或失败。我们可以使用 Promise 来避免回调函数的嵌套，并使代码更加清晰和可读。

Promise 如何工作？

Promise 有三种状态：

待定（Pending）：这是 Promise 的初始状态。它表示异步操作尚未完成。
已完成（Fulfilled）：这是 Promise 的成功状态。它表示异步操作已成功完成，并带有结果值。
已拒绝（Rejected）：这是 Promise 的失败状态。它表示异步操作已失败，并带有错误值。

我们可以使用 then() 方法来处理 Promise 的结果。then() 方法接受两个参数：一个用于处理成功结果的函数，另一个用于处理失败结果的函数。

例如，以下代码演示了如何使用 Promise 来获取远程服务器上的数据：

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的代码中，fetch() 函数用于获取远程服务器上的数据。fetch() 函数返回一个 Promise，表示异步操作的结果。然后我们使用 then() 方法来处理 Promise 的结果。第一个 then() 方法用于处理成功的结果，第二个 then() 方法用于处理失败的结果。

Promise 的优点

使用 Promise 有很多优点，包括：

可读性： Promise 使代码更易于阅读和理解。
可维护性： Promise 使代码更易于维护和调试。
错误处理： Promise 提供了一种简单的方法来处理错误。
可组合性： Promise 可以组合在一起，以创建更复杂的操作。

Promise 的实现

Promise 可以使用原生的 JavaScript 实现。以下代码演示了如何实现一个简单的 Promise：

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

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

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

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.result);
      } else if (this.state === 'rejected') {
        onRejected(this.result);
      } else {
        this.onFulfilledCallbacks.push(onFulfilled);
        this.onRejectedCallbacks.push(onRejected);
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }
}