１０分でわかる：Vue.jsとaxios を利用した API の使用-初心者向け

はじめに

皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
今日は【Vue.jsとaxios を使って、APIからJson型データの取り扱い】について語りたいと思います。

※Vue.jsについて知りたい方こちらも見てください。
　　１０分で基礎がわからるVue.js-入門

やりたいこと：【APIで高機能なシングルページアプリケーション（SPA）を構築】

現在APIはWebアプリの開発にはデータのやり取りとして主な窓口となってます。そこで今回、高機能なシングルページアプリケーション（SPA）を構築したいと思い、フロントではVue.jsとaxiosを使用します。

・シングルページアプリケーション（SPA）の構築-非同期
・APIでJson型データのやり取り
・Vueの単一ファイルコンポーネント（.vue）でhtml、css、Javascriptを単一ファイルで管理することで、後修正が便利。

1.実行環境

・vue.js
・axios

2.やってみよう！

開発の際npmかyarnでvueとaxiosをインストールします。

vue_npm_install.

npm install vue

axios_npm_install.

npm install --save-dev axios

試しであれば、CDNで

・https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。

vue_cdn.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

axios_cdn.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

基本的な例

・以下の内容はこちらを引用

今回はCoinDesk APIを利用して Bitcoin の価格を表示します。
まずAPIの中身を見てみよう。

mountライフサイクルフックを利用し、dataプロパティにaxiosで取得したJsonデータを格納します。

See the Pen Vue__axios_API by Uramaya (@uramaya) on CodePen.

実例: データの操作

・API から取得したデータを表示

See the Pen Vue__axios_API２ by Uramaya (@uramaya) on CodePen.

・API から取得したデータから必要な情報だけを表示
filterを使用して小数点以下を2桁に整えます。

See the Pen
WNNvoqp by Uramaya (@uramaya)
on CodePen.

・エラー処理
APIの取得にエラーが発生した場合、理由を把握します。

よくあるエラー原因：
・API がダウンしている。
・リクエストが間違っている。
・API は予期した形式で情報を渡さなかった。

axios コールでは、 catch を使用してエラー原因を取得します。

See the Pen Vue__axios_API_Error by Uramaya (@uramaya) on CodePen.

axiosライブラリをもっと知る

現在REST APIでは以下の通信種類があります：

・GET (参照)
・POST (登録)
・PUT (更新)
・DELETE (削除)

上記の例はGET (参照)ですが、登録や更新、削除の通信を行う場合は、以下の記事をご参考ください。
　　・axiosライブラリを使ってリクエストする

おまけに

今回はaxiosを使いましたが、APIでJsonデータを取得する方法はaxiosだけではありません。他にVueではFetch APIというネイティブAPIがあります。

Fetch API
・利点：外部リソースを読み込む必要がない。
・欠点： polyfill を使用する必要があり、全てのブラウザーでサポートされてるとは限りません。（特にIE）
polyfill：JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する！

上記の原因でaxiosを好む方も多いようですね。

See the Pen Vue__axios_API_Fetch by Uramaya (@uramaya) on CodePen.

まとめ

いかがでしょうか。
今回はVue.jsとaxiosの使用方法についての簡単な紹介をしました。
是非開発でも使ってみてください！:D