useEffect、Promise、カスタムフックを使用した React での非同期操作の処理

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

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

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

---

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

React の useEffect フックは、コンポーネントのマウント時にデータをフェッチするなどの副作用を実行するのに最適です。フック自体は Promise を直接返すことができないため、エフェクト内で非同期関数を使用します。

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

なぜ 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 を使用する

より複雑な状態遷移がある場合、または非同期プロセス中に複数のアクション (読み込み、成功、エラーなど) を処理する必要がある場合、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;

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

---

5.結論

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

---

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