ReactでAxiosを使用した共通コードの実装方法

まず、Axiosをインストールする必要があります。プロジェクトのルートディレクトリで、以下のコマンドを実行してください:

npm install axios

または

yarn add axios

Axiosがインストールされたら、共通のコードを作成します。一般的なアプローチは、Axiosのインスタンスを作成し、共通の設定やヘッダーを設定することです。以下は、共通コードの例です:

// axiosInstance.js
import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // ベースURLを設定する
  timeout: 5000, // リクエストのタイムアウトを設定する
  headers: {
    'Content-Type': 'application/json', // リクエストのコンテンツタイプを設定する
    // 他の共通のヘッダーがあればここに追加する
  },
});
export default axiosInstance;

上記のコードでは、axios.create()を使用してAxiosのインスタンスを作成し、共通の設定を指定しています。baseURLでは、リクエストのベースURLを指定します。timeoutでは、リクエストがタイムアウトするまでの時間をミリ秒単位で指定します。headersでは、共通のヘッダーを設定します。例として、JSON形式のコンテンツタイプを指定しています。

共通のコードを使用する場合は、以下のようにAxiosのインスタンスをインポートしてリクエストを行うことができます:

// ExampleComponent.js
import React, { useEffect } from 'react';
import axiosInstance from './axiosInstance';
const ExampleComponent = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axiosInstance.get('/data'); // 共通のコードを使用してリクエストを行う
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {/* コンポーネントの内容 */}
    </div>
  );
};
export default ExampleComponent;

上記の例では、axiosInstanceをインポートして使用しています。共通のコードが適用され、axiosInstance.get()を使用してリクエストを行っています。

以上がReactでAxiosの共通コードを実装する方法の例です。これにより、複数のコンポーネントで同じ設定やヘッダーを再度指定する必要がなくなります。