f:id:k-enter:20210710203118p:plain — vue.js

お題

hogehoge.com/api/v1/organisms というURLを叩いたときに

[{"Name": "犬", "Category": "哺乳類"}, {"Name": "マグロ", "Category": "魚類"}, {"Name": "タカ", "Category": "鳥類"}]

という配列を返すapiを利用するとします。

このapiにVue.jsを使ってアクセスし、情報を取得してみましょう！

完成コード

<template>
// templateは今回割愛
</template>

<script>
import axios from "axios";

export default {
  name: "Sample",
  created() {
    axios.get('hogehoge.com/api/v1/organisms')
    .then(response => {
      console.log(response.data);
    });
    .catch(error => {
      console.log(error)
    });
  },
};
</script>

<style>
// styleは今回割愛
</style>

開発

① まずvue-cliで生成したディレクトリ内でaxiosを導入します。

$ npm install axios --save

② scriptの中にimport axios from "axios";の記述をしましょう。
③ createdの中にてaxiosでのGET通信を呼び出します。

created() {
    axios.get('hogehoge.com/api/v1/organisms')
    .then(response => {
      console.log(response.data);
    });
    .catch(error => {
      console.log(error)
    });
  },
},