JavaScript 和 React Native 中的 Promise：建立、使用和常見場景

處理非同步任務在 JavaScript 中至關重要，尤其是在像 React Native 這樣的環境中，資料擷取、動畫和使用者互動需要無縫運作。 Promise 提供了一種管理非同步操作的強大方法，使程式碼更具可讀性和可維護性。本部落格將介紹如何在 JavaScript 中建立和使用 Promise，以及與 React Native 相關的實際範例。

---

什麼是承諾？

JavaScript 中的

Promise 是一個表示非同步操作最終完成（或失敗）的物件。它允許我們以更同步的方式處理非同步程式碼，避免經典的「回調地獄」。 Promise 有三種狀態：

• 待處理：初始狀態，既不滿足也不拒絕。
• 已完成：操作成功完成。
• 已拒絕：操作失敗。

---

創造一個承諾

為了建立 Promise，我們使用 Promise 建構函數，它採用帶有兩個參數的單一函數（執行器函數）：

解決：當操作成功完成時，請呼叫此函數來履行承諾。
拒絕：如果發生錯誤，請呼叫此函數拒絕承諾。

範例：建立基本 Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

在此範例中：

我們建立一個 Promise，透過 setTimeout 模擬取得資料。
如果 success 變數為 true，我們將使用一些資料呼叫resolve()；否則，我們呼叫reject()並顯示錯誤訊息。

---

將 Promise 與 .then()、.catch() 和 .finally() 一起使用

一旦建立了 Promise，我們就可以使用以下方法處理其結果：

.then() 處理成功的解決方案，
.catch() 處理錯誤，以及
.finally() 在 Promise 解決後執行程式碼，無論結果為何。

範例：處理 Promise

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

在此範例中：

如果 Promise 得到解決，則呼叫 .then() 並列印資料。
.catch() 處理承諾被拒絕時發生的任何錯誤。
.finally() 無論 Promise 是否已解決或拒絕都會運作。

---

React Native 中 Promise 的實際用例

1. 從 API 取得數據

在 React Native 中，資料擷取是一種常見的非同步任務，可以透過 Promise 進行有效管理。

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

用例：從 REST API 或其他網路請求獲取數據，我們需要處理成功的回應和錯誤。

---

2. 使用 Promise 進行順序非同步操作

有時，一個非同步任務依賴另一個非同步任務。 Promise 讓依序連結操作變得容易。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

用例：用於登入用戶，然後根據其身分取得個人資料資料。

---

3. 使用 Promise.all() 處理多個 Promise

如果您有多個可以並行執行的獨立 Promise，Promise.all() 允許您等待所有這些 Promise 得到解決或其中任何一個被拒絕。

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

用例：同時取得多個資源，例如從單獨的 API 端點取得貼文和註解。

---

4. 使用 Promise.race() 競賽 Promise

使用 Promise.race()，第一個解決（解決或拒絕）的 Promise 決定結果。當您想要為長時間運行的任務設定逾時時，這非常有用。

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

用例：為網路請求設定逾時，這樣如果伺服器緩慢或無回應，它們就不會無限期掛起。

---

5. 使用 Promise.allSettled() 處理混合結果

Promise.allSettled() 等待所有 Promise 解決，無論它們是解決還是拒絕。當您需要所有承諾的結果時（即使有些承諾失敗），這很有用。

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

用例：在執行多個請求（其中某些請求可能會失敗）時很有用，例如取得可選資料來源或進行多個 API 呼叫。

---

進階技術：將回調轉換為 Promise

較舊的程式碼庫或某些程式庫可能使用回調而不是承諾。您可以將這些回調包裝在 Promise 中，將它們轉換為現代的基於 Promise 的函數。

範例：將回調包裝在 Promise 中

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

用例：此技術可讓您以承諾友好的方式使用基於回呼的遺留程式碼，使其與現代非同步/等待語法相容。

---

概括

Promise 是管理 JavaScript 和 React Native 中非同步操作的強大工具。透過了解如何在各種場景中建立、使用和處理 Promise，您可以編寫更清晰、更易於維護的程式碼。以下是常見用例的快速回顧：

• API 請求：從伺服器取得資料並進行錯誤處理。
• 連鎖操作：依序執行依賴任務。
• 並行操作：使用 Promise.all() 同時執行多個 Promise。
• 超時和競賽：使用 Promise.race() 限制請求持續時間。
• 混合結果：使用 Promise.allSettled() 處理可能部分失敗的任務。
• 轉換回呼：將基於回呼的函數包裝在 Promise 中以與現代語法相容。

透過有效地利用 Promise，您可以讓 JavaScript 和 React Native 中的非同步程式設計更乾淨、更可預測且更健壯。

以上是JavaScript 和 React Native 中的 Promise：建立、使用和常見場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！