使用 useEffect、Promises 和自定义 Hooks 处理 React 中的异步操作

在 React 中处理异步调用

处理异步操作是 React 应用程序中的常见要求，尤其是在使用 API、数据库或外部服务时。由于 JavaScript 操作（例如从 API 获取数据或执行计算）通常是异步的，因此 React 提供了工具和技术来优雅地处理它们。

在本指南中，我们将使用 async/await、Promises 和其他 React 特定工具探索在 React 中处理异步调用的不同方法。

---

1.使用 useEffect 进行异步调用

React 的 useEffect 钩子非常适合执行副作用，例如在组件安装时获取数据。钩子本身不能直接返回承诺，因此我们在效果中使用异步函数。

在 useEffect 中使用 async/await

以下是如何使用 useEffect 挂钩处理异步调用以获取数据。

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• async/await：处理基于 Promise 的获取过程。
• 错误处理：捕获错误并显示适当的消息。
• 加载状态：管理加载并显示加载指示器，直到获取数据。

为什么使用异步/等待？

• 简化代码：避免需要 .then() 和 .catch() 链。
• 更干净、更具可读性：Promise 可以以更线性的方式处理。

---

2.使用 Promise 进行异步操作

另一种常见方法是直接将 Promises 与 then() 和 catch() 结合使用。这种方法不如 async/await 优雅，但在 JavaScript 中仍然广泛用于处理异步操作。

在 useEffect 中使用 Promise

这是一个使用 Promise 和 then() 进行异步调用的示例：

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• then()：成功解决 Promise。
• catch()：捕获 API 调用期间发生的任何错误。
• 错误处理：如果请求失败，则显示错误消息。

---

3.使用 useReducer 实现复杂的异步逻辑

当您有更复杂的状态转换或需要在异步过程中处理多个操作（如加载、成功、错误）时，useReducer 是管理状态更改的绝佳工具。

使用 useReducer 进行异步操作

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• useReducer：针对复杂异步逻辑的更强大的状态管理工具。
• 多个操作：分别处理不同的状态，如加载、成功和错误。

---

4.使用自定义挂钩实现可重用异步逻辑

在某些情况下，您可能希望跨多个组件重用异步逻辑。创建自定义钩子是封装逻辑并使代码更可重用的绝佳方法。

创建用于获取数据的自定义钩子

import React, { useState, useEffect } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• 自定义 Hook (useFetch)：封装了获取数据、错误处理、加载状态的逻辑。
• 可重用性：钩子可以在任何需要获取数据的组件中重用。

---

5.结论

在 React 中处理异步操作对于构建现代 Web 应用程序至关重要。通过使用 useEffect、useReducer 和自定义钩子等钩子，您可以轻松管理异步行为、处理错误并确保流畅的用户体验。无论您是获取数据、处理错误还是执行复杂的异步逻辑，React 都为您提供了强大的工具来高效管理这些任务。

---

以上是使用 useEffect、Promises 和自定义 Hooks 处理 React 中的异步操作的详细内容。更多信息请关注PHP中文网其他相关文章！