React での非同期呼び出しの処理

非同期操作の処理は、React アプリケーション、特に API、データベース、または外部サービスを操作する場合の一般的な要件です。 API からのデータの取得や計算の実行などの JavaScript 操作は非同期であることが多いため、React はそれらを適切に処理するためのツールとテクニックを提供します。

このガイドでは、async/await、Promises、およびその他の React 固有のツールを使用して、React で非同期呼び出しを処理するさまざまな方法を検討します。

---

1.非同期呼び出しに useEffect を使用する

React の useEffect フックは、コンポーネントのマウント時にデータをフェッチするなどの副作用を?qū)g行するのに最適です。フック自體は Promise を直接返すことができないため、エフェクト內(nèi)で非同期関數(shù)を使用します。

useEffect 內(nèi)での 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 ベースの取得プロセスを処理します。
• エラー処理: エラーを捕捉し、適切なメッセージを表示します。
• 読み込み狀態(tài): 読み込みを管理し、データがフェッチされるまで読み込みインジケーターを表示します。

なぜ async/await を使用するのですか?

• コードを簡素化します: .then() および .catch() チェーンの必要性を回避します。
• よりわかりやすく、より読みやすくなりました: Promise をより直線的な方法で処理できます。

---

2.非同期操作に Promise を使用する

もう 1 つの一般的なアプローチは、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 を使用する

より複雑な狀態(tài)遷移がある場合、または非同期プロセス中に複數(shù)のアクション (読み込み、成功、エラーなど) を処理する必要がある場合、useReducer は狀態(tài)の変更を管理する優(yōu)れたツールです。

非同期操作での 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)管理ツール。
• 複數(shù)のアクション: 読み込み、成功、エラーなどのさまざまな狀態(tài)を個別に処理します。

---

4.再利用可能な非同期ロジックにカスタム フックを使用する

場合によっては、複數(shù)のコンポーネント間で非同期ロジックを再利用したい場合があります。 カスタムフックの作成は、ロジックをカプセル化し、コードをより再利用しやすくする優(yōu)れた方法です。

データをフェッチするためのカスタムフックの作成

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;

• カスタム フック (useFetch): データのフェッチ、エラー処理、狀態(tài)の読み込みのためのロジックをカプセル化します。
• 再利用性: フックは、データをフェッチする必要があるコンポーネント全體で再利用できます。

---

5.結論

React での非同期操作の処理は、最新の Web アプリケーションを構築するために不可欠です。 useEffect、useReducer、カスタム フックなどのフックを使用すると、非同期動作を簡単に管理し、エラーを処理し、スムーズなユーザー エクスペリエンスを確保できます。データのフェッチ、エラーの処理、複雑な非同期ロジックの実行など、React はこれらのタスクを効率的に管理するための強力なツールを提供します。

---

以上がuseEffect、Promise、カスタムフックを使用した React での非同期操作の処理の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。