Promise的秘密：我们以为自己了解它，但其实并没有

2023-12-27 05:11:07

JavaScript 开发者们，让我们承认一个不为人知的秘密：我们也许并不真正了解 Promise。

哦，当然，我们都熟悉 Promise 的 A+ 规范，它是 Promise 规范的基石。而且，它确实非常出色。但问题是，在我过去一年使用 Promise 的过程中，我目睹了许多开发者在使用 Promise API（例如 PouchDB API 或其他 Promise API）时，却完全没有意识到 Promise 背后的关键概念。

这是为什么？部分原因可能是，Promise 的概念看似简单直观。它们是表示异步操作的结果的容器，并且可以通过 .then() 和 .catch() 方法进行链接。但这种表面的简单性往往掩盖了 Promise 的复杂本质，特别是当涉及到并发操作和错误处理时。

Promise 的基础

为了真正理解 Promise，我们首先需要了解它的基础。Promise 有三种状态：

未决： Promise 刚创建时处于此状态，表示异步操作尚未完成。
已解决： 异步操作已成功完成，Promise 已包含结果。
已拒绝： 异步操作已失败，Promise 已包含错误。

Promise 只能从未决状态转换到已解决或已拒绝状态。一旦 Promise 转换到已解决或已拒绝状态，它将永远保持该状态。

Promise 链

Promise 的强大功能之一是能够链接在一起，形成所谓的 Promise 链。这是通过 .then() 和 .catch() 方法实现的：

.then() 方法接受两个函数作为参数：一个用于处理已解决的 Promise 的结果，另一个用于处理已拒绝的 Promise 的错误。
.catch() 方法接受一个函数作为参数，用于处理已拒绝的 Promise 的错误。

通过链接 Promise，我们可以创建复杂的异步操作序列，其中每个操作的结果或错误都会传递到下一个操作。

并发操作

Promise 真正大放异彩的地方在于处理并发操作。我们可以使用 Promise.all() 或 Promise.race() 方法来处理多个并发操作：

Promise.all() 方法接受一个 Promise 数组作为参数，并返回一个 Promise。该 Promise 在所有给定 Promise 都已解决（或其中一个已拒绝）时解决。
Promise.race() 方法接受一个 Promise 数组作为参数，并返回一个 Promise。该 Promise 在第一个给定的 Promise 已解决（或已拒绝）时解决。

错误处理

错误处理是 Promise 的另一个重要方面。.catch() 方法允许我们处理已拒绝的 Promise 的错误。但是，重要的是要注意，.catch() 方法仅能捕获从 Promise 链中冒出的错误。如果错误发生在 Promise 链之外，则需要使用全局错误处理程序（例如 window.onerror）来捕获该错误。

真实世界的示例

让我们看一个真实世界的示例，展示如何使用 Promise 来处理并发操作和错误处理：

const fetchUserData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 1000);
  });
};

const fetchUserPosts = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve(['Post 1', 'Post 2', 'Post 3']);
    }, 1000);
  });
};

Promise.all([fetchUserData(), fetchUserPosts()])
  .then(([userData, userPosts]) => {
    console.log(`User data: ${JSON.stringify(userData)}`);
    console.log(`User posts: ${JSON.stringify(userPosts)}`);
  })
  .catch((error) => {
    console.error('Error occurred:', error);
  });