ReactでAxiosのベースURLを設定する方法

2024-02-08 08:23 React Axios ベースURL
  1. グローバルなベースURLの設定: Axiosのデフォルトの設定を変更することで、全てのリクエストで同じベースURLを使用することができます。通常、アプリケーションのエントリーポイントであるindex.jsファイルなどで設定を行います。
import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';

上記の例では、https://api.example.comがベースURLとして設定されています。これにより、Axiosを使用した全てのリクエストでこのベースURLが自動的に付与されます。

  1. 個別のリクエストでベースURLを指定: 特定のリクエストごとに異なるベースURLを使用したい場合は、リクエストごとにbaseURLオプションを指定することができます。
import axios from 'axios';
axios.get('/users', { baseURL: 'https://api.example.com' })
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラーの処理
  });

上記の例では、/usersエンドポイントに対するGETリクエストで、ベースURLとしてhttps://api.example.comが指定されています。

  1. インスタンスを使用して異なるベースURLを設定: Axiosのインスタンスを作成することで、異なるベースURLを複数使用することもできます。以下は例です。
import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
instance.get('/users')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラーの処理
  });

上記の例では、instanceという名前のAxiosインスタンスを作成し、そのインスタンスを使用してリクエストを行っています。このインスタンスは、指定したベースURLを使用します。

これらはReactでAxiosのベースURLを設定するいくつかの方法の例です。アプリケーションの要件に応じて適切な方法を選択してください。