axiosを使ってVue.jsアプリからHTTPリクエストを送信するコード

はじめに

以下はVue.jsからLaravelなどで構成されたサーバーにHTTPリクエストを送信し、APIを実行する工程のメモになります

AxiosをVue.jsプロジェクトに追加する

Vue.jsのプロジェクトでAxiosを使用するには、Axiosをインストールする必要があります。Axiosは標準でVue.jsに組み込まれていないため、以下のコマンドでプロジェクトに追加する必要があります。

npm install axios

VueコンポーネントでAxiosをインポートする

Axiosを使うためにはscriptタグの中でaxiosをimportをする必要があります

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',  // APIから取得するメッセージを保存する変数
    };
  },
  methods: {
    async fetchData() {
      try {
        // APIのURLにGETリクエストを送信
        const response = await axios.get('https://api.example.com/data');
        
        // APIから返ってきたデータをmessageにセット
        this.message = response.data.message;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  },
  mounted() {
    // コンポーネントがマウントされた時にfetchDataメソッドを呼び出す
    this.fetchData();
  }
};
</script>

import

axiosはJavaScriptの外部ライブラリであり、別のファイルに定義されています。そのため、axiosを使用するには、まずそのライブラリをインポート（import）する必要があります。

export default

ァイルが他のファイルに読み込まれたときに、そのファイルが提供する主要な機能やオブジェクトを簡単にインポートできるようします。export defaultは「ファイルの主要な部分を他のファイルに公開する」ために使いますが、モジュールの内容を他のファイルで簡単に利用できるようにするだけで、ファイルを読み込んだ際に自動的にメソッドが実行されるわけではありません。

data()

コンポーネント内で使う変数を設定するためのものです。
以下の場合、returenで変数を返し、返された変数はtemplateで使用することができます
後述のAPIで変数の値を変更することができます

<template>
  <div>
    <h1>{{ message }}</h1> <!-- ここで message 変数の値が表示される -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'  // 初期値として 'Hello, Vue!' を設定
    };
  }
};
</script>

methodsオブジェクト

Vue.jsコンポーネント内で使用する関数（メソッド）を定義するための部分です。
methodsという名称を使用することでVue.jsはそのセクションを自動的に認識しているので名称の変更はNGです

例ではAPIからデータを取得して、取得したデータをdata()で宣言している変数に設定しております

methods: {
  async fetchData() {
    try {
      // APIのURLにGETリクエストを送信
      const response = await axios.get('https://api.example.com/data');
      
      // APIから返ってきたデータをmessageにセット
      this.message = response.data.message;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

async

JavaScriptで非同期処理を扱うための特別なキーワードです。async を付けると、そのメソッド内で await を使って非同期処理の完了を待つことができます。

fetchData

データを取得するためのメソッド名で名前は自由に決められます。

tryブロックとcatchブロック

エラーが発生する可能性のあるコードを実行するためのブロックを作成するために使います。try ブロック内でエラーが発生すると、プログラムは catch ブロックに移ります。これにより、エラー処理を行うことができます

try はaxios を使用する際に必ずしも必要というわけではありません。ただし、エラー処理が重要な場合には、try と catch を使ってエラーを適切に処理することが推奨されます。

methods: {
  async fetchData() {
    try {
      // APIからデータを取得
      const response = await axios.get('https://api.example.com/data');
      this.message = response.data.message;  // データをコンポーネントのデータに保存
    } catch (error) {
      // エラーが発生した場合にエラーメッセージを表示
      console.error('データの取得中にエラーが発生しました:', error);
    }
  }
}

await

await は非同期処理の結果を待つために使います。
非同期処理を行う関数の前に await を書くと、その処理が終わるまで次の行のコードが実行されません。

axios.get

特定のURLにリクエストを送り、そのレスポンスを取得できます

APIに合わせてリクエストの種類を以下のように変更できます

• axios.get: データを取得する
• axios.post: データをサーバーに送信する
• axios.put: データを更新する
• axios.delete: データを削除する

this.message = response.data.message;

• response
  APIから返されたレスポンスデータを格納しています。axios を使ってHTTPリクエストを送信すると、response というオブジェクトが返ってきます。

• response.data
  レスポンスの中で、実際にサーバーから取得したデータ部分を指します。APIから返されるデータは、通常 response.data に含まれています。

• response.data.message:
  サーバー(API)からのデータの中で message というキーの値を取り出しています。サーバーが返すデータが
  { "message": "Hello, world!" } のような形になっている場合は、response.data.message で "Hello, world!" という文字列が取り出せます。

• this.message:

Vueコンポーネント内で定義された変数 message を指します。
this は現在のコンポーネントのインスタンスを指します。

• this.message = response.data.message;
  APIから取得した message をコンポーネントの変数 message に保存しています。これにより、コンポーネント内で this.message にアクセスすることで、取得したデータを表示したり利用したりすることができます。

catch (error)

try ブロック内でエラーが発生した場合、そのエラーは catch ブロックで処理されます。error は、発生したエラーの詳細を含むオブジェクトです。

APIリクエストが失敗した場合、そのエラー情報が error 変数に格納されます。

error 変数に含まれる情報

• error.message
  エラーの簡単な説明やメッセージが格納されています。
  例: 'Request failed with status code 401'
• error.response
  サーバーからの応答（レスポンス）に関する情報が含まれます。このプロパティは、サーバーがエラー応答を返した場合に存在します。
• error.response.status
  サーバーからのステータスコード（例: 401, 404, 500 など）
• error.response.data
  サーバーから返されたエラーメッセージや追加情報が含まれています。
• error.response.headers
  サーバーから返されたレスポンスヘッダー
• error.request
  サーバーにリクエストを送信したときのリクエストに関する情報が含まれます。このプロパティは、リクエストが送信されたが、サーバーから応答がなかった場合に存在します。リクエストの内容（URLやヘッダーなど）が含まれます。
• error.config
  リクエストの設定や構成が含まれます。リクエストの送信時に使用した設定（URL、ヘッダー、データなど）がここに格納されています。

console.error

console.errorはコンソールにエラーメッセージを表示するための関数です。
通常のログ出力とは異なり、エラーメッセージとして表示され、赤く表示することができます

例えば、API リクエストが失敗した場合、コンソールには次のようなメッセージが表示されます

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('データ:', response.data);
  } catch (error) {
    console.error('データの取得中にエラーが発生しました:', error);
  }
}

データの取得中にエラーが発生しました: [エラーの詳細]