【Axios】Nuxt.jsで、axiosを使ってサーバーとの通信を行う。

Nuxt.js下で、サーバーとの通信を行うことができるaxiosについてまとめたいと思います。

具体的にできることとしては、サーバーからのデータを取得したり(GET)、サーバーのデータを更新したり(PATCH / PUT)することができる。

今回は、GETリクエストに絞って使い方についてみていきましょう。

モジュールを利用できるようにする

axiosではなく、@nuxtjs/axiosをインストールすることで、ファイルごとにimportする必要がなくなる。
また、レスポンス値がdataプロパティであるため、res.dataにする必要がなくなる。（後述）

$ yarn add @nuxtjs/axios

nuxt.config.js

  modules: [
    '@nuxtjs/axios',  
  ],

リクエスト後のレスポンスによって、処理を変える

基本形

$axios.$get(URL)
  .then(function (res) {
    //通信が成功した後の処理
  })
  .chach(function (error) {
    //通信が失敗した後の処理
  })
  .final(function () {
    //通信後に必ず実行される処理
  })

1. getの引数にURLを取ることで、GETリクエストを送信
2. レスポンスの値は、functionの引数に格納される

実践

今回は、無料の外部サービスであるJSONPlaceholderを利用させてもらって、外部のデータを取得していきます。

Vue.js

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  mounted ()  {
    const res = $axios.$get('https://jsonplaceholder.typicode.com/posts/')
    .then(function (res) {
      this.posts = res
    })
  }
}
</script>

ページが読み込まれた後に、外部データを取得し、postsに格納することができる。

axiosの場合だとres.dataにしなければならないが、@nuxtjs/axiosだとレスポンス値がdataプロパティであるため、resだけでデータを取得できる。

簡略化したリクエスト後の処理

基本形

async function () {
  const res = await $axios.$get(URL)
  //通信後の処理
}

実践

Vue.js

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  mounted ()  {
    async function (context) {
      const res = await context.$axios.$get('https://jsonplaceholder.typicode.com/posts/')
      this.posts = res
    }
  }
}
</script>