2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-07-14

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?