介绍

JavaScript 是一种单线程编程语言，这意味着它一次只能运行一个任务。对于诸如获取数据或设置计时器之类的异步操作来说，这变得很棘手，这可能会阻止执行流程并减慢应用程序的速度。

为了在不冻结线程的情况下处理这些异步任务，我们遇到了Promise——一个简化异步编程的强大工具。使用 Promises，您可以更有效地管理长时间运行的任务，编写更干净、更具可读性的代码，并避免可怕的“回调地狱。”

在本文中，我的目标是让您熟悉 Promises 是什么、它们如何工作以及它们如何简化异步编程。

什么是承诺？

想象一下您正在一家餐厅点餐。下订单后，您无需在厨房等待食物准备好。相反，您可以在厨房在后台准备餐点的同时继续交谈或享受氛围。餐厅承诺一旦食物准备好，就会为您提供食物。您可以相信这个承诺，因为最终会发生以下两种情况之一：您的餐食将到达（已完成），或者厨房将通知您他们无法完成订单（已拒绝).

在 JavaScript 中，Promises 的工作方式类似。当您要求 JavaScript 执行一些需要时间的操作（例如从服务器获取数据）时，它会返回 Promise。这个 Promise 不会立即给你结果。相反，它会告诉您，“工作完成后我会回复您。”在此期间，其余代码将继续运行。任务完成后，Promise 为：

• 已完成（任务成功），或
• 拒绝（任务失败），您可以进行相应处理。

Promise 在 JavaScript 中如何工作

A Promise 代表一个可能现在、将来或永远不可用的值。它有三种状态：

• 待处理：任务仍在进行中，最终结果（完成或拒绝）尚未确定。
• 已完成：任务成功完成，结果可见。
• 已拒绝：任务失败，有错误可处理

1. 创造一个承诺

要创建 Promise，请使用 Promise 构造函数，该构造函数接受一个具有两个参数的函数（称为执行器）：resolve 和reject。当Promise被满足时，resolve函数被调用，而当被拒绝时，reject函数被调用。

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. 解决和拒绝承诺

一旦创建了Promise，您可以通过调用resolve或reject来决定其结果：

• resolve(value)：当异步操作成功完成时调用此函数。它将一个值传递给等待 Promise 履行的处理程序。
• reject(error)：当操作失败时调用该函数。它将错误消息传递给等待 Promise 被拒绝的处理程序。

3. 消费承诺

创建了 Promise 后，下一步就是使用它。 JavaScript 提供了几种处理 Promise 结果的方法：.then()、.catch() 和 .finally()。这些方法中的每一个都有特定的目的，并允许您有效地管理异步操作的结果。

• 使用 .then() 处理已解决的 Promise：.then() 方法用于指定当 Promise 被履行时应该发生什么。它需要两个可选参数：一个用于解析值的回调，另一个用于处理拒绝。

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• 使用 .catch() 处理拒绝：.catch() 方法专门用于处理 Promise 执行期间发生的错误。这使其成为处理拒绝的干净方法。

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• 使用 .finally() 进行最终或清理操作：.finally() 方法允许您在 Promise 解决后执行代码，无论它是被履行还是被拒绝。这对于应在成功和失败场景中运行的清理操作或任务非常有用。

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

简而言之：

• then()：使用此方法处理 Promise 的解析值。
• catch()：使用此方法来处理 Promise 被拒绝时的错误。
• finally()：此方法在 Promise 解决后运行代码，无论结果如何，允许清理或最终操作。

4. 承诺链

Promises 最强大的功能之一是它们能够链接在一起，允许您按顺序执行多个异步操作。这意味着每个操作在执行之前都要等待前一个操作完成，这在任务相互依赖时特别有用。

我们看下面的例子：

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

在此示例中，fetchUserData 函数返回一个用用户信息解析的 Promise。然后将解析后的值传递给 fetchPosts 函数，该函数返回另一个 Promise。如果这些 Promise 中的任何一个被拒绝，则错误将在最终的 .catch() 方法中捕获，从而允许在整个链中进行有效的错误处理。

结论

总之，Promise 是现代 JavaScript 的重要组成部分，使开发人员能够以更加结构化和高效的方式处理异步操作。通过使用 Promise，您可以：

• 简化异步任务的管理，避免回调地狱。
• 链接多个异步操作以保持清晰的执行流程。
• 通过统一的方法有效处理错误。

当您在自己的项目中实现 Promise 时，您会发现它们不仅提高了代码的可读性，而且还通过保持应用程序的响应能力来增强整体用户体验。我希望这段 JavaScript 基本概念之旅能够为开发人员提供有价值的见解。快乐编码！