前置き
API通信に便利なaxios！
導入からデータ取得までの
簡単な流れを解説します🌟
(Firebase & Vuexやりたいのですが
1万字を越えたため整理中です🙇♀️💦)
❓API
機能を共有できる仕組みです！
例えばこんなことができます🎈
・amazonの商品データを引っ張ってきて
売れ筋商品を把握する
・Google Mapsの地図を引っ張ってきて
地図をカスタマイズする
自分で1から作らなくても、
既にあるものを利用できたら楽ですよね？🌟
それを叶えてくれるのがAPIです🤗
❓axios
HTTPクライアントライブラリです。
HTTP通信は
ブラウザとサーバーの
やり取りのことです！
ブラウザが
「これ表示してほしい！🙏」
ってサーバーにお願いして
表示してもらったり、
(GETメソッドのこと)
「このデータ預かっといて！🙏」
ってお願いしたら預かってもらったり。
(POSTメソッドのこと)
axiosはjsonファイルでそれが可能です。
jsonファイルを取ってきたり
そこに追加したりできるもの
と覚えておけばOKです♪
❓APIとaxiosに何の関連が…
APIがjsonファイルなんです。
つまりAPIデータを取ってきたり
そこに追加することが
axiosなら可能なんです❣️
というわけで
さっそく導入して
APIデータを取得しましょう♪
Step1: axiosのインストール
axiosは最初からNuxtに入っているわけではないので
インストールが必要です🌟
https://ja.nuxtjs.org/guide/async-data/
https://axios.nuxtjs.org/
$ npm install --save @nuxtjs/axios
modules: [
'@nuxtjs/axios',
],
axios: {}
<script>
import axios from 'axios'
</script>
Step2: JSONplaceholderの確認
❓JSONplaceholder
お試しAPIです。
ダミーデータですが本格的にAPIを使う前に
動作確認ができるのでオススメです🌟
まずはここから始めましょう📚✨
各データはここに用意されています。
step3: まずはそのまま取得
/postsのデータを取得してみましょう！
https://jsonplaceholder.typicode.com/posts
✅urlをクリックしてください💡
これがjsonファイルです👀
データの型が[{ }]となっていますね🧸💭
データを加工せずに取得だけしましょう。
【表示】
<template>
<div class="page">
<p>{{ posts }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
}
},
mounted () {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => this.posts = response)
}
}
</script>
【解説】
mountedでgetしてきたresponseを
posts: [ ]に代入しています。
https://jsonplaceholder.typicode.com/posts
↑ここには表示されていませんが
取得した物にはこんな表示がありますね💡
{ "data": }
step4: 取得データの型を変更
step2で出てきた { "data": }
これはいらない部分です。
中身だけ表示させたいですね💡
更にv-forを使ってliで表示させたいです💡
【表示】
<template>
<div class="page">
<ul>
<li v-for="post in posts" :key="post.id">
{{ post }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
}
},
mounted () {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => this.posts = response.data)
}
}
</script>
【解説】
・{ "data": } をなくすために
resoponse.dataに書き換える
✅あとはこの中の
表示させたいdataだけを指定する
{{ post.title}} とか🐠
【表示】
<template>
<div class="page">
<ul>
<li v-for="post in posts" :key=post.id>
{{ post.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
}
},
mounted () {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => this.posts = response.data)
}
}
</script>
step5: queryを使って取得
今度は/posts/1を取得してみましょう！
https://jsonplaceholder.typicode.com/posts/1
✅urlをクリックしてください💡
/postsに沢山あったオブジェクトが
1つになりましたね！
paramsによってidやtitleなどを
変えられるパターンです。
試しにurlの1を100までの
好きな数字に変えてみてください♪
❓params, query
基礎編をご覧ください😄
https://note.com/aliz/n/ndf76ebe9853b#Qdde8
【表示】
<template>
<div class="page">
<ul>
<li v-for="post in posts" :key=post.id>
{{ post.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
}
},
mounted () {
axios.get('https://jsonplaceholder.typicode.com/posts/' + this.$route.params.id)
.then((response) => this.posts = response)
}
}
</script>
【解説】
・index.vueではなく_id.vueに記載
→JSONplaceholderで好きな数字を入力したように
自ファイルでもそれを可能にするため
・this.$route.params.idで
ローカルで好きな数字を入力
→それに合わせて取得urlが変化
https://jsonplaceholder.typicode.com/posts/{好きな数字}
・response.dataにする必要なし
→jsonのオブジェクトが1つのため不要
非同期でやるには？
asyncDataを使います！
が、長くなるのでまた別記事か
続きを出そうかと思っております🌟
次回
Firebase & Vuex😀
公開予定日は5/1(金)です。
🌟が、5/2(土)から
noteにて有料販売とさせていただきます！
前置きでも書いたように
1万字を越えるボリューム…
とっっても濃い内容なので
ぜひご覧ください❤️
記事が公開したときにわかる様、
twitter, noteのフォローをお願いします😀
🍒twitter
https://twitter.com/aLizlab
🍒note
https://note.com/aliz