JavaScript 中的 Pumble

理解 JavaScript Promise

Promise 是 JavaScript 中的一项强大功能，可以简化异步操作的处理。它们提供了一种更清晰、更直观的方式来处理异步代码，避免了“回调地狱”等问题。

---

什么是承诺？

A Promise 是一个对象，表示异步操作的最终完成（或失败）及其结果值。它允许您通过链接操作和有效处理错误来编写更易于管理的异步代码。

承诺的状态

Promise 具有三种状态：

• 待处理：初始状态，既不满足也不拒绝。
• 已完成：操作成功完成，并且 Promise 具有结果值。
• 已拒绝：操作失败，并且promise有失败原因（通常是错误）。

例子：

const promise = new Promise((resolve, reject) => {
  let success = true; // Change to false to simulate rejection

  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed.");
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

---

承诺方法

1.然后()

• 用于处理承诺的履行。
• 返回另一个承诺，启用链接。

promise
  .then((result) => {
    console.log(result);
    return "Next Step";
  })
  .then((nextResult) => console.log(nextResult));

2. 捕获（）

• 用于处理承诺拒绝。

promise.catch((error) => console.error(error));

3. 最后（）

• 用于执行一段代码，无论 Promise 的结果如何。

promise.finally(() => console.log("Cleanup actions."));

4.Promise.all()

• 当数组中的所有承诺都得到解决时才解决。
• 如果任何承诺被拒绝，则立即拒绝。

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);

Promise.all([promise1, promise2]).then((results) => console.log(results));

5. Promise.allSettled()

• 等待所有承诺解决（履行或拒绝）。

const promise1 = Promise.resolve("Success");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) => console.log(results));

6. Promise.race()

• 一旦其中一个承诺解决或拒绝，就解决或拒绝。

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "One"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Two"));

Promise.race([promise1, promise2]).then((result) => console.log(result));

7.Promise.any()

• 一旦履行任何承诺就解决。
• 如果所有承诺都被拒绝，则拒绝。

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success");
const promise3 = Promise.reject("Error 2");

Promise.any([promise1, promise2, promise3]).then((result) => console.log(result));

---

链接承诺

链接可以按顺序处理多个异步操作。

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    return fetch("https://api.example.com/other-data");
  })
  .then((otherResponse) => otherResponse.json())
  .then((otherData) => console.log(otherData))
  .catch((error) => console.error("Error:", error));

---

Promise 中的错误处理

错误通过 Promise 链传播，直到被 catch() 块捕获。

fetch("https://api.example.com/data")
  .then((response) => {
    if (!response.ok) throw new Error("Network response was not ok");
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

---

现实生活中的用例示例

您可以在这里探索 Promise 的详细现实用例：

<script></script>

---

结论

JavaScript Promises 提供了一种稳健的方法来清晰、高效地处理异步操作。通过掌握 Promise，您可以编写更干净、更易于维护的代码，并避免像回调地狱这样的陷阱。开始练习上面的方法和示例，您将顺利掌握异步 JavaScript！

以上是JavaScript 中的 Pumble的详细内容。更多信息请关注PHP中文网其他相关文章！