【Nuxt.js】axios導入編：かんたん・お手軽API通信

🎈 この記事はWPへ移行しました
【Nuxt.js】axios導入編：かんたん・お手軽API通信

# 前置き

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

【nuxt.config.js】

modules: [
  '@nuxtjs/axios',
],
axios: {}

【index.vue】

<script>
import axios from 'axios'
</script>

# Step2: JSONplaceholderの確認

❓JSONplaceholder
お試しAPIです。
ダミーデータですが本格的にAPIを使う前に
動作確認ができるのでオススメです🌟
まずはここから始めましょう📚✨

JSONPlaceholder - Free Fake REST API

各データはここに用意されています。

# step3: まずはそのまま取得

/postsのデータを取得してみましょう！
https://jsonplaceholder.typicode.com/posts

✅urlをクリックしてください💡
これがjsonファイルです👀

データの型が[{ }]となっていますね🧸💭
データを加工せずに取得だけしましょう。

【表示】

【index.vue】

<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で表示させたいです💡

【表示】

【index.vue】

<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}} とか🐠

【表示】

【index.vue】

<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

【表示】

【_id.vue】

<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(土)から
有料販売とさせていただきます！
前置きでも書いたように
1万字を越えるボリューム…
とっっても濃い内容なので
ぜひご覧ください❤️

記事が公開したときにわかる様、
フォローをお願いします😀
https://twitter.com/aLizlab

🎈 この記事はWPへ移行しました
【Nuxt.js】axios導入編：かんたん・お手軽API通信