【Vue.js】Axiosを使ってみる

VueでAxios（Ajaxを簡単に使えるライブラリ）を使ってみたので、紹介

作ったアプリ：「New Cat」ボタンを押すたびに猫の画像が変化する

f:id:kayo445:20200531210921p:plain

↓ボタンクリックすると猫が変わる

f:id:kayo445:20200531211021p:plain

コードは下記に置きましたので、参考になれば。

github.com

1. コンソールでアプリ作成し、axiosをインストール

vue create vue-axios

cd vue-axios

npm install axios

2. App.vueを下記のように変更

<template>
<div id="app">

// clickイベントの時に、FetchNewCatメソッドを呼び出す
<button @click="fetchNewCat">New Cat</button> <img :src="catImage" alt="Cat Image" />
</div>
</template>

<script>

// axios インポート
import axios from 'axios';

export default {
name: 'App',
data() {
return {
// 猫の画像URL格納用変数
catImage: null
};
},
created() {

// ページロード時にfetchNewCatメソッドを実行
this.fetchNewCat();
},
methods: {
fetchNewCat() {

// axiosでAPIを実行し、responseを取得
axios
.get('https://api.thecatapi.com/v1/images/search')
.then(response => {
console.log('Search complete!');
console.log(response);

//変数に猫のURLを一つ格納
this.catImage = response.data[0].url;
})

// error処理
.catch(err => {
console.log('Search failed!');
console.log(err);
});
},
},
}
</script>