準備するもの

・なにかしらのAPI

・Node JS, npm

イントロ

VueではAPIのハンドリングはJavaScriptのライブラリに全て任せており、特にビルトインのメソッド等はありません。理由としてはJavaScriptで既にAPIを扱うライブラリが多く存在しているからです。

Axiosとは

まずは公式サイトを見てみましょう。

https://axios-http.com/

あとGitHubのリポも見てみます。

https://github.com/axios/axios

1. AxiosはAPIのエンドポイント（URL）にHTTPのリクエストを送る為のライブラリです。
2. そのリクエストから返ってきたdataプロパティを使えるようになります。
3. リクエストが成功した場合のステータスは200で、ステータステキストはOKです。
4. 通常はAxiosがJSONデータに自動で変換されます。
5. タイムアウト設定やリクエストのキャンセルの設定もできます。

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です。

でｈじゃ、お疲れさまでした。