【React.js】デフォルトヘッダーを設定して、Axiosリクエストをさらに便利に

React.jsとAxiosでデフォルトのリクエストヘッダーを設定する方法

2つの主要な方法があります:

Axios.create を使用する

axios.create メソッドを使用して、デフォルトヘッダーを含むカスタムAxiosインスタンスを作成できます。この方法は、すべてのHTTPリクエストにデフォルトヘッダーを設定するのに便利です。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN',
  },
});

// すべてのリクエストはこのインスタンスを使用します
instance.get('/data')
  .then(response => console.log(response.data));

Axiosインターセプターを使用する

Axiosインターセプターを使用して、リクエストとレスポンスを処理するコードを挿入できます。この方法は、リクエストごとにヘッダーを動的に変更する必要がある場合に便利です。

import axios from 'axios';

axios.interceptors.request.use(config => {
  // すべてのリクエストにAuthorizationヘッダーを追加
  config.headers.Authorization = 'Bearer YOUR_TOKEN';
  return config;
});

axios.get('/data')
  .then(response => console.log(response.data));

どちらの方法を選択するかは、具体的なニーズによって異なります。

• axios.create は、単純でわかりやすい方法です。
• Axiosインターセプターは、より柔軟性がありますが、複雑さも増します。

• デフォルトヘッダーに加えて、リクエストごとにヘッダーをオーバーライドすることもできます。

import React from 'react';
import axios from 'axios';

const App = () => {
  const instance = axios.create({
    baseURL: 'https://api.example.com',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_TOKEN',
    },
  });

  const fetchData = async () => {
    try {
      const response = await instance.get('/data');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>データフェッチ</button>
    </div>
  );
};

export default App;

この例では、App コンポーネント内で axios.create を使用してカスタムAxiosインスタンスを作成しています。このインスタンスは、baseURL と headers プロパティを使用してデフォルトヘッダーを設定します。

fetchData 関数は、このインスタンスを使用して /data エンドポイントへのGETリクエストを送信します。

import React from 'react';
import axios from 'axios';

const App = () => {
  axios.interceptors.request.use(config => {
    config.headers.Authorization = 'Bearer YOUR_TOKEN';
    return config;
  });

  const fetchData = async () => {
    try {
      const response = await axios.get('/data');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>データフェッチ</button>
    </div>
  );
};

export default App;

この例では、App コンポーネント内で Axiosインターセプターを使用して、すべてのリクエストに Authorization ヘッダーを追加しています。

import axios from 'axios';

const customInstance = axios.create({
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'YOUR_CUSTOM_HEADER_VALUE',
  },
});

// このインスタンスは、デフォルトヘッダーを含むリクエストを送信します
customInstance.get('/data')
  .then(response => console.log(response.data));

ローカルストレージを使用する

デフォルトヘッダーをローカルストレージに保存し、リクエストごとにそれらを読み込むことができます。この方法は、ユーザーごとに異なるデフォルトヘッダーを設定する必要がある場合に便利です。

import axios from 'axios';

const getHeadersFromStorage = () => {
  const storedHeaders = localStorage.getItem('defaultHeaders');
  return storedHeaders ? JSON.parse(storedHeaders) : {};
};

axios.interceptors.request.use(config => {
  const headers = getHeadersFromStorage();
  config.headers = { ...config.headers, ...headers };
  return config;
});

環境変数を使用する

import axios from 'axios';

const getHeaderFromEnv = (headerName) => {
  return process.env[headerName] || '';
};

axios.interceptors.request.use(config => {
  config.headers.Authorization = getHeaderFromEnv('API_KEY');
  config.headers['X-Custom-Header'] = getHeaderFromEnv('CUSTOM_HEADER_VALUE');
  return config;
});

最適な方法は、特定のニーズによって異なります。

• シンプルでわかりやすい方法は、axios.create を使用する方法です。
• 特定のコンポーネントまたはモジュール内でデフォルトヘッダーを使用する必要がある場合は、カスタムAxiosインスタンスを作成する方法を使用します。
• ユーザーごとに異なるデフォルトヘッダーを設定する必要がある場合は、ローカルストレージを使用する方法を使用します。
• CI/CDパイプラインなどでデフォルトヘッダーを設定する必要がある場合は、環境変数を使用する方法を使用します。