axiosでJSONを取得する[Vue.js]

2019年3月1日

HTTPクライアントであるaxiosモジュールを利用して、Vue.jsにおいてJSONデータを取得してみます。

 

JSONのモックデータを提供するサービスであるJSONPlaceholderを利用します。

 

 

以下リンクで取得できるデータにおいて、userIdが1のデータをGETによって取得してみます。

 

https://jsonplaceholder.typicode.com/todos

 

まずはCDNを利用した1ファイルによって作成してみます。

44〜47行目

Getメソッドによってデータを取得しています。クエリパラメータとしてuserId=1を渡しています。Postメソッドの場合は「axios.post(〜)」によって実行します(本記事では説明しません)。

https://jsonplaceholder.typicode.com/todos?userId=1

 

49、52行目(then、catch)

axiosはPromiseベースであり、thenは処理が正常に実行された場合、catchはネットワークの不具合等により処理が失敗した場合に実行されます。Promiseの非同期処理に関しては下記の関連ページをご覧下さい。

 

Promiseによる非同期処理[resolve][reject][Promise.all]

 

ChromeのデベロッパーツールのNetworkにて、「Offline」や「Slow 3G」などを選択するとエラーや「Loading」の処理が確認しやすくなります。

 

 

 

次にVue Cli 3によって作成したプロジェクトでaxiosを利用してみます。

 

Vue Clie 3によるプロジェクト作成は下記の関連ページをご覧下さい。

 

Vue CLI 3 ではじめるVue RouterとVuex入門

 

npmでインストールします。

 

package.jsonファイルのdependenciesの項目を見ると、axiosが設定されているのが確認できます。

 

main.jsにてaxiosを取り込みます。これですべてのコンポーネントにおいて「this.$axios」でaxiosが利用できるようになります。

9行目のprototypeについては下記の関連ページをご覧下さい。

 

prototype(プロトタイプ)について

 

About.vueをまるごと下記のように編集します。

任意のコンポーネントの<script>内にてaxiosをインポートすることも可能です。その場合は「this.$axios」ではなく「axios」となります。

 

 

以上でAbout画面にて、取得したデータを確認できます。

 

 

 

参照ページ・書籍


 

axios を利用した API の使用

 

インスタンスプロパティの追加

 

v-cloak

 

インスタンスプロパティの追加

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー