8. Promise

Reactでは、非同期処理を行うためにさまざまな方法があります。データの取得やAPI呼び出し、タイマーなど、非同期処理は多くのアプリケーションで重要な役割を果たします。

Fetch API

Fetch APIは、ブラウザに組み込まれたモダンな非同期リクエスト機能です。Promiseベースであり、シンプルなHTTPリクエストを行うために使用されます。

使用例

以下は、Fetch APIを使ってデータを取得する例です：

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

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

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

Axios

Axiosは、PromiseベースのHTTPクライアントライブラリで、ブラウザとNode.jsの両方で動作します。Fetch APIと比べて多くの便利な機能を提供し、非同期リクエストの処理を簡素化します。

使用例

以下は、Axiosを使ってデータを取得する例です：

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

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

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

カスタムフックによるデータ取得

カスタムフックを使用することで、非同期処理のロジックを再利用可能な形で分離することができます。これにより、コードの可読性と保守性が向上します。

使用例

以下は、データ取得用のカスタムフックを定義し、それをコンポーネントで使用する例です：

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

function useDataFetching(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get(url)
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

function DataFetchingComponent() {
  const { data, loading, error } = useDataFetching('https://api.example.com/data');

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

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

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

カスタムフックを使用することで、データ取得のロジックを他のコンポーネントでも簡単に再利用できるようになります。

---

このように進めていきます。他に追加や修正の希望があればお知らせください。