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中文網其他相關文章！