Vue.jsのAPIコールについて

Vue.jsでAPIを呼び出すには、通常はaxiosやfetchなどのJavaScriptのHTTPクライアントを使用します。これらのクライアントを使って、サーバーからデータを取得し、Vue.jsのデータに反映させることができます。

そもそもVue.jsとは？という方は以下のリンクからご覧ください

axiosのインストール:

Vue CLIを使用している場合は、すでにaxiosがインストールされている場合があります。それ以外の場合は、npmやyarnなどのパッケージマネージャーを使ってaxiosをインストールします。

npm install axios

APIコールの実行:

Vueコンポーネント内でaxiosを使用してAPIを呼び出します。以下は、GETリクエストを行う例です。

import axios from 'axios';

export default {
  data() {
    return {
      responseData: null
    };
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          this.responseData = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  },
  mounted() {
    this.fetchData();
  }
};

上記の例では、fetchDataメソッドがコンポーネントがマウントされた時に呼び出され、axios.getメソッドでAPIからデータを取得し、取得したデータをVue.jsのデータであるresponseDataに格納しています。

データの表示:

取得したデータは、Vue.jsのデータバインディングを使用してHTMLに表示することができます。

<template>
  <div>
    <div v-if="responseData">
      <p>{{ responseData }}</p>
    </div>
    <div v-else>
      <p>Loading...</p>
    </div>
  </div>
</template>

上記の例では、responseDataが取得されるまで「Loading…」が表示され、データが取得されるとAPIからの応答が表示されます。

以上が、Vue.jsでのAPIコールの基本的な使い方です。axiosを使用することで、Vue.jsアプリケーションでのサーバーとの通信を簡単に行うことができます。