Nuxt.jsでAxios を使ってAPI接続する方法

こんにちはー！
Nuxt.js やってますかー？

今回は、Nuxtでデータやり取りするときに結構使うであろう axios というPromiseベースのHTTPクライアントのライブラリを使った、API接続の方法を紹介したいと思います！

Axios ってなんや

と、その前に axios ってなんやねんってことなんですけども、ググると、

PromiseベースのHTTPクライアントのライブラリ。

って感じで出てきます。
あ、ちなみに axios の読み方は アクシオス らしいです。僕はずっと アキシオス と読んでいました。

まぁ要するにHTTP通信してくれるライブラリってことです。もっと簡単に考えると今回のやと、API通信するためのライブラリって感じで思っておいてくれたらオッケーやと思います！

で、
今回のそのaxiosを使ってAPI接続して、GET したり〜 POST したり〜 したいと思います。あ、ちなみに条件としては Nuxt.js 上で使うというところでやっていきたいと思います！

Axios のインストール

まぁインストールしときましょと。

$ yarn add @nuxtjs/axios

$ npm install @nuxtjs/axios

@nuxtjs/axios は Nuxt.js 用の Axios のライブラリ。

んで、次にnuxt.config.jsにこのような設定を書く。

module.exports = {

  // 省略

  modules: [
    "@nuxtjs/axios"
  ],

  // 省略

}

これで一旦は準備完了。

Axios の処理を書いてみる

準備は整ったので実際にAxiosを使ってAPI接続してみたいと思う。
GETの場合は基本的にこんな感じ。

$axios.$get("エンドポイント")

POSTの場合はこんな感じ。

$axios.$post("エンドポイント")

$getと$postがちゃうだけ。簡単っしょ？

とりあえず、書く場所によってちょっとだけ書き方変わるので2つ例出したいと思います。

asyncData に書いた場合

1つ目、 aysncData というところに書いてみた場合はこんな感じで接続できる。

async asyncData({ $axios }) {
  const response = await $axios.$get("エンドポイント")
    .catch( error => {
      console.log("response error", error)
      return false
    })
  return { data: response.data }
}

methods に書いた場合

2つ目は、methodsというところに書いてみた場合はこんな感じ。this付けます。

methods: {
  click() {
    const response = this.$axios.$get("エンドポイント")
      .then( response => {
        console.log('response data', response)
      })
      .catch( error => {
        console.log("response error", error)
      })
  }
}

てな感じで書けば、とりあえずエンドポイントにアクセスできるはず！
書き方は何パターンかあると思いますが、おおよそこんな感じで書けるのではないでしょうか？