JavaScript 和 React Native 中的 Promise：创建、使用和常见场景-js教程-PHP中文网

Promises in JavaScript and React Native: Creation, Usage, and Common Scenarios

处理异步任务在 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 与 .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

登录后复制

在此示例中：

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

登录后复制

用例：此技术允许您以承诺友好的方式使用基于回调的遗留代码，使其与现代异步/等待语法兼容。