Axios の get メソッドの使い方

Axios の get メソッドに関する問題: URLとオブジェクトパラメータ

問題
Axios の get メソッドで URL を指定してリクエストを行うことは正常に動作しますが、第2引数としてオブジェクトを渡すとエラーが発生します。

原因
この問題の主な原因は、Axios の get メソッドの第2引数としてオブジェクトを渡す際に、正しいパラメータ形式を使用していないことにあります。

正しい使い方

URL パラメータ

axios.get('https://api.example.com/data')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

オブジェクトパラメータ

axios.get('https://api.example.com/data', {
  params: {
    key: 'value',
    otherKey: 'otherValue'
  }
})
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

説明

• オブジェクトパラメータ
  
  • params プロパティを使用して、クエリパラメータを指定します。
  • params の値はオブジェクトで、キーと値のペアが含まれます。
• URL パラメータ
  直接 URL を指定します。

注意

• オブジェクトパラメータは、クエリパラメータを指定する際に便利です。
• オブジェクトパラメータを使用する場合は、必ず params プロパティを使用してください。

例

// URL パラメータを使用
axios.get('https://api.example.com/data?key=value&otherKey=otherValue')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

// オブジェクトパラメータを使用
axios.get('https://api.example.com/data', {
  params: {
    key: 'value',
    otherKey: 'otherValue'
  }
})
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

Axios の get メソッドの使い方: 例

Axios の get メソッドは、HTTP GET リクエストを送信するための関数です。URL を指定して、サーバーからデータを取得します。

基本的な使い方

axios.get('https://api.example.com/data')
  .then(response => {
    // レスポンスの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラー処理
    console.error(error);
  });

• .catch()
  エラーが発生した場合に実行されるコールバック関数です。
• URL
  リクエストを送信する URL を指定します。
• axios.get()
  Axios の get メソッドを呼び出します。

オブジェクトパラメータの使用

axios.get('https://api.example.com/data', {
  params: {
    key: 'value',
    otherKey: 'otherValue'
  }
})
  .then(response => {
    // レスポンスの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラー処理
    console.error(error);
  });

• キーと値のペア
  クエリパラメータのキーと値を指定します。
• 第2引数
  オブジェクトを指定して、リクエストのパラメータを設定します。

例: API からデータを取得する

axios.get('https://api.example.com/users')
  .then(response => {
    const users = response.data;
    console.log(users);
  })
  .catch(error => {
    console.error(error);
  });

この例では、API からユーザーのデータをフェッチし、コンソールに表示します。

例: クエリパラメータを使用してデータをフィルタリングする

axios.get('https://api.example.com/products', {
  params: {
    category: 'electronics',
    price: '100-200'
  }
})
  .then(response => {
    const products = response.data;
    console.log(products);
  })
  .catch(error => {
    console.error(error);
  });

この例では、API から電子機器カテゴリの製品を価格範囲 100-200 でフィルタリングして取得します。

URL パラメータを直接指定する

最もシンプルな方法は、URL に直接クエリパラメータを指定することです。

axios.get('https://api.example.com/data?key=value&otherKey=otherValue')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

axios.create() を使用してカスタムインスタンスを作成する

axios.create() を使用して、カスタムの Axios インスタンスを作成し、そのインスタンスの get メソッドを使用することができます。

const customAxios = axios.create({
  baseURL: 'https://api.example.com',
  params: {
    apiKey: 'yourApiKey'
  }
});

customAxios.get('/data')
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

axios.get() の第2引数に paramsSerializer を指定する

paramsSerializer オプションを使用して、クエリパラメータをシリアライズする関数を指定することができます。

axios.get('https://api.example.com/data', {
  params: {
    key: 'value',
    otherKey: 'otherValue'
  },
  paramsSerializer: function (params) {
    // カスタムのシリアライゼーションロジック
    return Qs.stringify(params, { arrayFormat: 'brackets' });
  }
})
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });

axios.post() を使用して POST リクエストを送信する

場合によっては、POST リクエストを使用してデータを送信することもできます。

axios.post('https://api.example.com/data', {
  key: 'value',
  otherKey: 'otherValue'
})
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラー処理
  });