Vue.js axios(アクシオス)を使用してWebApiからデータを取得するサンプルコード

Vue.js axios(アクシオス)を使用してWebApiからデータを取得するサンプルコード

cdnのvueとaxiosを利用して外部のWebApiからデータを取得するサンプルコードです。

環境

  • OS  Windos10
  • エディタ VScode

WebApi

今回は、ランダムで人名を返してくれる無料WebApi「RANDOM USER GENERATOR」を利用させて頂きます。

仕様

取得したJSONデータの名前と性別を、サイトに表示させるだけとなります。

サンプルコード

とりあえず、下記のソースコードをindex.htmlとして作成して保存します。

ソースの概要は下記に記載しております。

保存したファイルをブラウザで開いて確認 。

名前がランダムで取得されます。

ソースコード概要

ソースの概要を簡単に記載しておきます。

CDNを利用してvueとaxiosを読み込んでます

dataオプションにusersというプロパティ名の配列を記述して、v-forディレクティブで繰り返し表示させています

axiosのgetメソッドにURLを指定することで、全てのデータがここではresponse に入ります。その取得したデータを dataオプションの配列users[] に保存してます。

.catch(response => console.log(response))は、エラー発生時に処理させたい内容を記述します

mountedに関しては、createdとは違い、DOMにアクセスできる(mounted)かできない( created )で、どちらもvueインスタンス生成後に実行されます

下記の記述は、axios.get(‘https://randomuser.me/api/?results=10’)と同じことで、 パラメータオプションを利用して記述してあります。