今回はVueJSでaxiosというモジュールを使って非同期処理で外部のAPIを叩いて、取得したデータをページに表示させる処理について紹介します。
axiosで非同期処理で外部APIを叩き、取得したデータを表示させる
早速試してみます。今回使用しているAPIはこのサイトのワードプレスのパブリックAPIで最新の記事とURLを取得します。
ワードプレスのAPIの詳細については下記の記事で紹介しています
関連記事：【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
コメント