Vueと共通

【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

) pages


Step2: JSONplaceholderの確認

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

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


step3: まずはそのまま取得

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

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

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

表示

コード

) pages

解説

mountedでgetしてきたresponseを
posts: [ ]に代入しています。
https://jsonplaceholder.typicode.com/posts
↑ここには表示されていませんが
取得した物にはこんな表示がありますね💡
{ "data":  }


step4: 取得データの型を変更

step2で出てきた { "data":  }
これはいらない部分です。
中身だけ表示させたいですね💡
更にv-forを使ってliで表示させたいです💡

中身の表示・v-for使用

表示

コード

) pages

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

表示するものを指定する

あとはこの中の
表示させたいdataだけを指定します。
{{ post.title}} とか🐠

表示

コード

) pages


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

表示

コード

解説

  • index.vueではなく_id.vueに記載
    JSONplaceholderで好きな数字を入力したように
    自ファイルでもそれを可能にするため
  • this.$route.params.idでローカルで好きな数字を入力
    それに合わせて取得urlが変化
    https://jsonplaceholder.typicode.com/posts/{好きな数字}
  • response.dataにする必要なし
    jsonのオブジェクトが1つのため不要

非同期でやるには?

asyncDataを使います!
が、長くなるのでまた別記事か
続きを出そうかと思っております🌟

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

-Vueと共通
-,

© 2020 aLiz Nuxt