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

前置き

API通信に便利なaxios！
導入からデータ取得までの
簡単な流れを解説します🌟

APIとは

機能を共有できる仕組みです！
例えばこんなことができます🎈

amazonの商品データを引っ張ってきて売れ筋商品を把握する
Google Mapsの地図を引っ張ってきて地図をカスタマイズする

自分で1から作らなくても、
既にあるものを利用できたら楽ですよね？🌟
それを叶えてくれるのがAPIです🤗

axiosとは

HTTPクライアントライブラリです。
HTTP通信は
ブラウザとサーバーの
やり取りのことです！

ブラウザが
「これ表示してほしい！🙏」
ってサーバーにお願いして
表示してもらったり、
(GETメソッドのこと)

「このデータ預かっといて！🙏」
ってお願いしたら預かってもらったり。
(POSTメソッドのこと)

axiosはjsonファイルでそれが可能です。
jsonファイルを取ってきたり
そこに追加したりできるもの
と覚えておけばOKです♪

APIとaxiosに何の関係が…

APIがjsonファイルなんです。
つまりAPIデータを取ってきたり
そこに追加することが
axiosなら可能なんです❣️

Step1: axiosのインストール

axiosは最初からNuxtに入っているわけではないので
インストールが必要です🌟
https://ja.nuxtjs.org/guide/async-data/
https://axios.nuxtjs.org/

terminal

$ npm install --save @nuxtjs/axios

) file

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

modules: [

'@nuxtjs/axios',

axios: {}

) pages

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

import axios from 'axios'

</script>

Step2: JSONplaceholderの確認

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

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

step3: まずはそのまま取得

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

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

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

表示

コード

) pages

<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>

<p>{{ posts }}</p>

</div>

</template>

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

中身の表示・v-for使用

表示

コード

) pages

{ "data": } をなくすために
resoponse.dataに書き換えます！

<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>

<ul>

</li>

</ul>

</div>

</template>

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だけを指定します。
{{ post.title}} とか🐠

表示

コード

) pages

<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>

<ul>

</li>

</ul>

</div>

</template>

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>

<ul>

</li>

</ul>

</div>

</template>

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を使います！
が、長くなるのでまた別記事か
続きを出そうかと思っております🌟

2020/07/28
asyncDataの記事を公開しました！
こちらをご覧ください👀

【Nuxt.js】Nuxt文法編：asyncData