JavaScriptでaxiosモジュールを使用してAPIリクエストを行う方法

まず、以下のコードを使用してaxiosモジュールをインポートします。

const axios = require('axios').default;

APIリクエストを行うには、axiosのget、post、put、deleteなどのメソッドを使用します。以下に、GETリクエストとPOSTリクエストの例を示します。

GETリクエストの例:

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

上記の例では、https://api.example.com/dataにGETリクエストを送信し、レスポンスデータを取得しています。成功した場合はレスポンスデータをコンソールに表示し、エラーが発生した場合はエラーメッセージをコンソールに表示します。

POSTリクエストの例:

axios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上記の例では、https://api.example.com/dataにPOSTリクエストを送信し、データオブジェクト{ name: 'John', age: 30 }を送信しています。成功した場合はレスポンスデータをコンソールに表示し、エラーが発生した場合はエラーメッセージをコンソールに表示します。

axiosでは、他にもさまざまなオプションや機能が提供されています。たとえば、ヘッダーの設定、認証、パラメータの設定などが可能です。公式のaxiosドキュメントを参照して、必要な機能を追加できます。

以上が、JavaScriptでaxiosモジュールを使用してAPIリクエストを行う方法の簡単な紹介です。この方法を活用して、WebアプリケーションやサービスでAPIとのデータの受け渡しを行うことができます。