Nuxt.js の http クライアントの使い方 (Get)

プロジェクトの作成

npx create-nuxt-app proj01

pages/get.vue

<!-- get.vue -->
<template>
  <section class="container">
      <h2>{{title}}</h2>
	<pre>{{data_aa}}</pre>

<table>
<tr><th>args</th>
<td> {{data_aa.args}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>origin</th>
<td> {{data_aa.origin}} </td></tr>
<tr><th>url</th>
<td> {{data_aa.url}} </td></tr>
</table>
	<hr>
	<p>{{now}}</p>

 </section>
</template>

<script>

const axios = require('axios')

const url = 'https://httpbin.org/get'



export default {
	data: function(){
	return {
		title: 'http Get',
		now: 'お待ち下さい...',
		};
	},

	asyncData: async function () {
		let result = await axios.get(url);
		return {data_aa: result.data};
	},
	created: function (){
		setInterval(() =>{
	var d = new Date();
	this.now = d.getHours()
		+ ':' + d.getMinutes()
		+ ':' + d.getSeconds();
	},1000);
	},
};
</script>

<style>
.container {
	padding: 5px 10px;
}
h2 {
	font-size: 30pt;
	color: green;
}

p {
	padding-top:5px;
	font-size: 20pt;
	color: cyan;
}

pre {
	padding: 10px;
	font-size: 10pt;
	color: blue;
}

hr {
	margin:10px 0px;
}

</style>

サーバーの実行

yarn dev

http://localhost:3000/get/ にアクセスする。