在 React 中處理異步調用

處理異步操作是 React 應用程序中的常見要求，尤其是在使用 API、數(shù)據(jù)庫或外部服務時。由于 JavaScript 操作（例如從 API 獲取數(shù)據(jù)或執(zhí)行計算）通常是異步的，因此 React 提供了工具和技術來優(yōu)雅地處理它們。

在本指南中，我們將使用 async/await、Promises 和其他 React 特定工具探索在 React 中處理異步調用的不同方法。

---

1.使用 useEffect 進行異步調用

React 的 useEffect 鉤子非常適合執(zhí)行副作用，例如在組件安裝時獲取數(shù)據(jù)。鉤子本身不能直接返回承諾，因此我們在效果中使用異步函數(shù)。

在 useEffect 中使用 async/await

以下是如何使用 useEffect 掛鉤處理異步調用以獲取數(shù)據(jù)。

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 的獲取過程。
• 錯誤處理：捕獲錯誤并顯示適當?shù)南ⅰ?/li>
• 加載狀態(tài)：管理加載并顯示加載指示器，直到獲取數(shù)據(jù)。

為什么使用異步/等待？

• 簡化代碼：避免需要 .then() 和 .catch() 鏈。
• 更干凈、更具可讀性：Promise 可以以更線性的方式處理。

---

2.使用 Promise 進行異步操作

另一種常見方法是直接將 Promises 與 then() 和 catch() 結合使用。這種方法不如 async/await 優(yōu)雅，但在 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 調用期間發(fā)生的任何錯誤。
• 錯誤處理：如果請求失敗，則顯示錯誤消息。

---

3.使用 useReducer 實現(xiàn)復雜的異步邏輯

當您有更復雜的狀態(tài)轉換或需要在異步過程中處理多個操作（如加載、成功、錯誤）時，useReducer 是管理狀態(tài)更改的絕佳工具。

使用 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：針對復雜異步邏輯的更強大的狀態(tài)管理工具。
• 多個操作：分別處理不同的狀態(tài)，如加載、成功和錯誤。

---

4.使用自定義掛鉤實現(xiàn)可重用異步邏輯

在某些情況下，您可能希望跨多個組件重用異步邏輯。創(chuàng)建自定義鉤子是封裝邏輯并使代碼更可重用的絕佳方法。

創(chuàng)建用于獲取數(shù)據(jù)的自定義鉤子

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)：封裝了獲取數(shù)據(jù)、錯誤處理、加載狀態(tài)的邏輯。
• 可重用性：鉤子可以在任何需要獲取數(shù)據(jù)的組件中重用。

---

5.結論

在 React 中處理異步操作對于構建現(xiàn)代 Web 應用程序至關重要。通過使用 useEffect、useReducer 和自定義鉤子等鉤子，您可以輕松管理異步行為、處理錯誤并確保流暢的用戶體驗。無論您是獲取數(shù)據(jù)、處理錯誤還是執(zhí)行復雜的異步邏輯，React 都為您提供了強大的工具來高效管理這些任務。

---

以上是使用 useEffect、Promises 和自定義 Hooks 處理 React 中的異步操作的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！