http通信で、ブラウザとWebサーバーとの間で通信を行うためのパッケージであるaxiosをnuxt.js環境に導入します。
npm install axiosJSON Placeholderなどの外部サービスからテスト用にリクエストを送れるJSONデータを用意します。
<template>
<div>{{users}}</div>
</template>
<script>
const axios = require("axios");
let url = "https://jsonplaceholder.typicode.com/user";
export default {
asyncData({ params }) {
return axios.get(url).then((res => {
return { users: res.data };
});
}
};
</script>
axiosを使用できるようにscript内で定義。url変数にurlを代入します。
asyncDataメソッドで非同期処理を行います。axios.getでurlにAPIからのデータ取得をリクエストしています。
レスポンスを受け取り、thenメソッドを使用。resに受け取ったデータが入っているので、returnでresのdataを返します。
受け取ったデータは配列構造になっています。
要素を一つ取り出す場合はDOM要素内で
{{users[0].id}},{{users[0].name}}上記のようにカンマ区切りで１つの配列の中の属性を取り出していきます。
複数のデータを取り出す場合は、v-forで回しましょう。これで複数データをいっきに表示することができます。
<ul>
<li v-for="user in users" :key="user.id">{{user.id}},{{user.name}}</li>
</ul>
Witten by Masa
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。