vueJS

【Vue.JS】axiosで非同期処理で外部APIを叩いて取得したデータを表示する

この記事は約4分で読めます。

 

今回はVueJSでaxiosというモジュールを使って非同期処理で外部のAPIを叩いて、取得したデータをページに表示させる処理について紹介します。

 

スポンサーリンク
スポンサーリンク

axiosで非同期処理で外部APIを叩き、取得したデータを表示させる

 

早速試してみます。今回使用しているAPIはこのサイトのパブリックAPIで最新の記事とURLを取得します。

 

関連記事:【Python】ワードプレス製サイトの記事一覧をREST APIで自動取得する

 

 

<index.html>

 <html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js” ></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

</head>

<body>

<div id=”app”>
<p> {{ info.data[0].title.rendered }} </p>
<p> url: {{info.data[0].link }} </p>
<p>—————————–</p>
<p> {{ info.data[1].title.rendered }} </p>
<p> url: {{info.data[1].link }} </p>
<p>—————————–</p>
<p> {{ info.data[2].title.rendered }} </p>
<p> url: {{info.data[2].link }} </p>
<p>—————————–</p>
<p> {{ info.data[3].title.rendered }} </p>
<p> url: {{info.data[3].link }} </p>
<p>—————————–</p>
<p> {{ info.data[4].title.rendered }} </p>
<p> url: {{info.data[4].link }} </p>

<br />

<p>※APIレスポンス全体</p>

{{info.data}}

</div>

</body>

</html>

<script>
const app = new Vue({
el: “#app”,
data () {
return {
info: null
}
},
mounted () {
axios
.get(‘https://tkstock.site/wp-json/wp/v2/posts?page=1’)
.then(response => (this.info = response))
}

})
</script>

 

ちなみに変数の後ろに?を付けることで初期状態で変数がundefinedでもエラーをスルーしてくれます。

 

 

 

参照:https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

参照:https://qiita.com/choco_p/items/68270ffc51687a45d2ac

 

 

コメント

タイトルとURLをコピーしました