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

---

什麼是承諾？

JavaScript 中的

Promise 是一個表示非同步操作最終完成（或失?。┑奈锛?。它允許我們以更同步的方式處理非同步程式碼，避免經(jīng)典的「回調(diào)地獄」。 Promise 有三種狀態(tài)：

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

---

創(chuàng)造一個承諾

為了建立 Promise，我們使用 Promise 建構(gòu)函數(shù)，它採用帶有兩個參數(shù)的單一函數(shù)（執(zhí)行器函數(shù)）：

解決：當(dāng)操作成功完成時，請呼叫此函數(shù)來履行承諾。
拒絕：如果發(fā)生錯誤，請呼叫此函數(shù)拒絕承諾。

範(fàn)例：建立基本 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
  });
}

在此範(fàn)例中：

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

---

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

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

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

範(fàn)例：處理 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

在此範(fàn)例中：

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

---

React Native 中 Promise 的實際用例

1. 從 API 取得數(shù)據(jù)

在 React Native 中，資料擷取是一種常見的非同步任務(wù)，可以透過 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 或其他網(wǎng)路請求獲取數(shù)據(jù)，我們需要處理成功的回應(yīng)和錯誤。

---

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

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

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
  });
}

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

---

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

如果您有多個可以並行執(zhí)行的獨立 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 決定結(jié)果。當(dāng)您想要為長時間運行的任務(wù)設(shè)定逾時時，這非常有用。

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");

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

---

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

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

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));

用例：在執(zhí)行多個請求（其中某些請求可能會失?。r很有用，例如取得可選資料來源或進行多個 API 呼叫。

---

進階技術(shù)：將回調(diào)轉(zhuǎn)換為 Promise

較舊的程式碼庫或某些程式庫可能使用回調(diào)而不是承諾。您可以將這些回調(diào)包裝在 Promise 中，將它們轉(zhuǎn)換為現(xiàn)代的基於 Promise 的函數(shù)。

範(fàn)例：將回調(diào)包裝在 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));

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

---

概括

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

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

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

以上是JavaScript 和 React Native 中的 Promise：建立、使用和常見場景的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！