#背景
NuxtでWebアプリを一から立ち上げしていて、APIとのやりとりをコーディングすることになりました。
今まで触ってたVueとかNuxtでは、APIとのやりとりはaxiosしか使ったことがなかったんですが、httpという別のモジュールがあるということを知りました。
今後はこっちが主流になりそうみたいな記事も見かけたので、勉強がてら使ってみようと思います!
#前提
Nuxtのプロジェクトが構築されていること。
#準備
主にNuxtとnuxt/httpの公式サイトを見てやりました。
Nuxt
https://nuxtjs.org/docs/2.x/get-started/installation
nuxt/http
https://http.nuxtjs.org/
まずはnuxt/httpのインストール
https://http.nuxtjs.org/setup
npm i @nuxt/http
nuxtの設定に追記
export default {
modules: ['@nuxt/http']
}
これだけで使えるようになります。超簡単。
#使い方
今回は情報取得用のAPIをコールします。
特にstoreに入れる必要はなかったのでasync-dataを採用しました。
https://nuxtjs.org/docs/2.x/features/data-fetching#async-data
/hoge というページでAPIをコールします。
<template>
<div>
{{ response }}
</div>
</template>
<script>
export default {
async asyncData({ $http }) {
// APIコール
const response = await $http.$get('https://hogehogeapi')
return { response }
},
}
</script>
こんな感じで書くとAPIで取得したデータを画面に表示することができました。
URLパラメータをAPIのパラメータとして使いたい場合は下のような感じ。
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.description }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params, $http }) {
const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
return { post }
}
}
</script>
#最後に
めっちゃ簡単で、Nuxtやっぱいいなーと思いました。(Nuxt初心者感)
ほとんど公式に書いてあることを間引いて訳しただけですが、誰かの役に立てばこれ幸いです。
開発進めて他の使い方のパターンとか出てきたらまたアップデートしたいと思います。