Promise：你的开发利器

2024-02-19 02:25:36

在现代 Web 开发中，处理异步操作是家常便饭。无论是发送网络请求，读取文件，还是与数据库交互，我们都需要一种机制来管理这些耗时的任务，而不会阻塞主线程，导致页面卡顿。这时，Promise 就闪亮登场了。它提供了一种优雅的方式来处理异步操作，使得代码更易于阅读，理解和维护。

JavaScript 中的 Promise 就像是对未来事件的承诺。当我们发起一个异步操作时，它会返回一个 Promise 对象。这个对象代表着操作的最终结果，它可能是成功的结果，也可能是失败的原因。我们可以通过 Promise 提供的 then 方法和 catch 方法来分别处理成功和失败的情况。

深入浅出 Promise 的工作原理

为了真正掌握 Promise，仅仅停留在使用层面是不够的，我们需要了解它的内部机制。Promise 的核心在于它的状态机。它有三种状态：

pending（进行中）： 初始状态，表示异步操作仍在进行。
fulfilled（已完成）： 异步操作成功完成。
rejected（已拒绝）： 异步操作失败。

当 Promise 的状态发生改变时，它会触发相应的回调函数。then 方法用于注册处理成功状态的回调函数，而 catch 方法用于注册处理失败状态的回调函数。

手写一个简易版 Promise

为了加深理解，我们可以尝试自己实现一个简易版的 Promise。

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

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

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

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

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        try {
          const result = onFulfilled(this.value);
          resolve(result); 
        } catch (error) {
          reject(error);
        }
      } else if (this.state === 'rejected') {
        try {
          const result = onRejected(this.reason);
          resolve(result); 
        } catch (error) {
          reject(error);
        }
      } else {
        this.onFulfilledCallbacks.push(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
        this.onRejectedCallbacks.push(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }
    });
  }

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

通过这段代码，我们可以看到 Promise 的基本结构。它包含了状态，结果，以及用于存储回调函数的数组。executor 函数用于执行异步操作，并根据结果调用 resolve 或 reject 方法来改变 Promise 的状态。

Promise 的链式调用

Promise 的一大亮点是它的链式调用。then 方法返回一个新的 Promise 对象，这使得我们可以将多个异步操作串联起来，形成一个清晰的流程。

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

在这个例子中，我们先发送一个网络请求，然后将响应转换为 JSON 格式，最后处理数据。每个 then 方法都返回一个新的 Promise 对象，使得我们可以继续链式调用。

Promise 的常用 API

除了 then 和 catch 方法，Promise 还提供了一些其他的常用 API：

Promise.resolve()： 创建一个已完成状态的 Promise。
Promise.reject()： 创建一个已拒绝状态的 Promise。
Promise.all()： 等待多个 Promise 全部完成。
Promise.race()： 等待多个 Promise 中的任意一个完成。

这些 API 可以帮助我们更灵活地处理各种异步场景。

常见问题解答

Promise 和回调函数有什么区别？

Promise 可以避免回调地狱，使代码更易于阅读和维护。它也提供了一种更结构化的方式来处理异步操作的结果。
Promise 的状态可以改变吗？

Promise 的状态一旦改变，就无法再改变。它只能从 pending 变为 fulfilled 或 rejected。
如何处理 Promise 中的错误？

可以使用 catch 方法来捕获 Promise 中的错误。
Promise.all() 和 Promise.race() 有什么区别？

Promise.all() 等待所有 Promise 完成，而 Promise.race() 等待任意一个 Promise 完成。
如何取消一个 Promise？

原生的 Promise 并没有提供取消机制。可以使用 AbortController 来实现取消功能，或者使用第三方库，例如 bluebird。