準備するもの
・なにかしらのAPI
・Node JS, npm
イントロ
VueではAPIのハンドリングはJavaScriptのライブラリに全て任せており、特にビルトインのメソッド等はありません。理由としてはJavaScriptで既にAPIを扱うライブラリが多く存在しているからです。
Axiosとは
まずは公式サイトを見てみましょう。
あとGitHubのリポも見てみます。
https://github.com/axios/axios
- AxiosはAPIのエンドポイント（URL）にHTTPのリクエストを送る為のライブラリです。
- そのリクエストから返ってきたdataプロパティを使えるようになります。
- リクエストが成功した場合のステータスは200で、ステータステキストはOKです。
- 通常はAxiosがJSONデータに自動で変換されます。
- タイムアウト設定やリクエストのキャンセルの設定もできます。
Axiosのインストール
では、VueのアプリにAxiosをインストールしてきます。別にVueでなくてもReactでも要領は同じです。
コマンドライン
npm install axios
基本的なAxiosの使い方
ここではAxiosのベース的なイメージを紹介します。
スクリプト側
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
HTMＬ側
<div id="app">
{{ info }}
</div>
このように、infoという、空のオブジェクトをHTML側に投げておいて、AxiosがAPIで取得したデータをのっけるようなイメージです。
mounted() メソッドはVueのライフサイクルの一部で、Vueアプリが作成されて、id=”app”にマウントされたときに実行されるように指示しています。
おまけ
ライフサイクルの流れ（例はOptionsAPIですが、感覚は同じです）
Axiosの慣習的な使い方
では、コンポーネントごとにAxiosのリクエストのコードを書くと、煩雑になるので、ベースとなるJSファイルを作成し、そこから呼び出すようにしましょう。
まずは、src直下にpluginsというディレクトリを作成しましょう。（フォルダ名は何でもよいです。）その下にEventService.jsファイルを作成します。（これも名前は何でも良いです。）
EventService.js
import axios from 'axios'
const apiClient = axios.create({
baseURL: 'https://api.coindesk.com/v1/bpi/currentprice.json',
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
export default {
getCurrentPrice(){
return apiClient.get('')
},
}
では、このEventService.jsをコンポーネントから呼び出してみます。
src/components直下にCoinPrice.vueを作成します。
CoinPrice.vue
<template>
<h1>Coin Price</h1>
<div>
{{ coins }}
</div>
</template>
<script>
import EventService from "../plugins/EventService.js";
export default {
components: {},
data() {
return {
coins: [],
};
},
created() {
EventService.getCurrentPrice()
.then((response) => {
this.coins = response.data;
})
.catch((error) => {
console.log("There was an error:" + error.response);
});
},
};
</script>
では、これをApp.cueからレンダーします。
App.vue
<template> <CoinPrice /> </template> <script> import CoinPrice from "./components/CoinPrice.vue"; </script>
で、デベサーバーを起動すると。。。
問題なくAPIが使えるようになりました。
なので、今後もAPIのエンドポイントが増えた場合はこのEventService.jsにベースとなるコマンドを記載して、必要なコンポーネントから呼び出していけるようになりますね。
HTMLをキレイに
では、必要な情報だけをフィルターしていきましょう。
<template>
<a-card size="small" title="ビットコインの値段" class="card" style="width:300px;">
<div>{{ coins.time.updated }} 現在</div>
<div>{{ coins.bpi.USD.rate }} USD</div>
<a-button
type="primary"
href="https://api.coindesk.com/v1/bpi/currentprice.json"
>APIデータを直で見る</a-button
>
</a-card>
</template>
<script>
import EventService from "../plugins/EventService.js";
export default {
components: {},
data() {
return {
coins: [],
};
},
created() {
EventService.getCurrentPrice()
.then((response) => {
this.coins = response.data;
console.log(this.coins);
})
.catch((error) => {
console.log("There was an error:" + error.response);
});
},
};
</script>
今回はUIライブラリのant Desginを使っていますがなくてもOKです。
でｈじゃ、お疲れさまでした。