Nuxt.jsでaxiosじゃなくてhttpとやらでAPIコールしてみた

背景

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の設定に追記

nuxt.config.js

export default {
  modules: ['@nuxt/http']
}

これだけで使えるようになります。超簡単。

使い方

今回は情報取得用のAPIをコールします。
特にstoreに入れる必要はなかったのでasync-dataを採用しました。
https://nuxtjs.org/docs/2.x/features/data-fetching#async-data

/hoge というページでAPIをコールします。

pages/hoge.vue

<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のパラメータとして使いたい場合は下のような感じ。

pages/posts/_id.vue

<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初心者感）
ほとんど公式に書いてあることを間引いて訳しただけですが、誰かの役に立てばこれ幸いです。
開発進めて他の使い方のパターンとか出てきたらまたアップデートしたいと思います。