【Vue】API読み込み中にグルグル(ローディング/スピナー)を表示する
こんちには。opiyoです。
vueでデータが読み込まれるまでの時間をローディング画像/スピナー画像を表示させて急に画像が表示されてユーザーを困らせないようにしたい!
API通信中にローディング画像を表示させて通信完了したら取得したデータに切り替えたい!
こんな悩みを解決していきたいと思います。
結論から言ってしまうと
- 「vue-simple-spinner」を使う
- v-showを使って表示/非表示を制御する
API連携する際にどうしてもタイムラグが出てしまってました。ローディング画像が無いと、急にシュッとデータが表示されるで何だかなーって思っていたので、グルグルを表示する方法を調べてみました!
vueでローディング/スピナーを表示する「vue-simple-spinner」のインストール
npmの場合
npm install vue-simple-spinner --save
CDNの場合(今回こっち使います)
<script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script>
githubはこちらから。
https://github.com/dzwillia/vue-simple-spinner
github見ると、最新は1.2.10
かなーと思って読み込むurlも変えてみたんだけどエラーになったので1.2.8
でやりました。
vueでローディング/スピナーを表示する「vue-simple-spinner」の使い方
1. ライブラリを取り込む
<script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script>
2. コンポーネント=componentsを定義する
const Spinner = window.VueSimpleSpinner; var app = new Vue({ components: { Spinner } })
3. テンプレート呼び出し
<spinner></spinner>
サンプル
では早速、画面を表示してみましょう!
グルグル = ローディング画像がちゃんと表示されていますね。
vueでAPI通信中にローディング/スピナーを表示する
次は、より実践的なものを試してみたいと思います!
API連携中はローディング画像を表示。API連携が完了したら取得したデータを表示させる。ってのをやってみます!
1. 表示/非表示を制御するフラグを定義する
var app = new Vue({ el: "#app", data: { message: 'Vueのローディング画像を検証するよ', isLoading: true }, })
2. API通信後にフラグをfalseにする
今回はワンチャンの画像を取得できるAPIを使ってみます!
APIを取得する方法はaxios
を使い、取得後にフラグを変更させます。
mounted :function(){ target = this axios.get('https://dog.ceo/api/breeds/image/random') .then(function(response) { target.image = response.data.message; target.isLoading = false }) .catch(function(response) { console.log(response); }); }
3. フラグを関知する設定を定義する
APIで取得したワンチャンの画像 = image
を表示させます。
また、v-show
を使ってisLoading
のtrue/false
を制御します。
<div id="app"> <p>{{ message }}</p> <spinner v-show="isLoading"></spinner> <img v-show="!isLoading" :src="image" alt=""> </div>
実際に動かして見ると............
リロードすると.......
ローディング画像が表示された後に新しい画像に変わってる事が確認できますね!
今回使ったプログラム
今回使ったプログラムは、こちらのgithubにもアップしておきました。
GitHub - nakanoTaku/vue-simple-spinner: vue-simple-spinnerの検証プログラム
が、こっちにも全文書いておきます!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ message }}</p> <spinner v-show="isLoading"></spinner> <img v-show="!isLoading" :src="image" alt=""> </div> <!-- vue関連読み込み --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script> <script> const Spinner = window.VueSimpleSpinner; var app = new Vue({ el: "#app", data: { message: 'Vueのローディング画像を検証するよ', image: '', isLoading: true }, components: { Spinner }, mounted :function(){ target = this axios.get('https://dog.ceo/api/breeds/image/random') .then(function(response) { target.image = response.data.message; target.isLoading = false }) .catch(function(response) { console.log(response); }); } }) </script> <style> #app { margin: 20px; text-align: center; } img { width: 120px; height: 120px; } </style> </body> </html>
まとめ
vueは便利で面白いですねー。
API使って何か処理するみたいなことは多くの場面で使うだろうから、実務でも使うことが出てきそうです。
今日は、「vue-simple-spinner」を使ったローディング画像の表示方法をまとめてみました。
使い方のおさらいです。
こんな感じです。
が、vueは絶賛勉強中なので間違いあれば「マサカリ」お待ちしております!!