【Nuxt.js】axiosを使った非同期通信

はじめに

こんにちは。
こちらの記事では、axiosで非同期通信を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

axiosとは

axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントで、HTTP通信を行いたいときに使うと簡単に実装できるようになる。Nuxt.jsに限らず、JavaScriptで使えるライブラリです。

実装のゴール

非同期通信で受け取ったデータのIDとユーザー名を表示させる。

axiosをインストールする

Nuxtで新規プロジェクトの作成する際や個別でインストールできる。
axiosのインストールがされていると、package.jsonのdependenciesのところにバージョンが表示される。

APIからデータを取得する

今回はJSONPlaceholderのusersデータを使用する。

script

<script>
const axios = require('axios')
// import axios from 'axios';　　でも定義できる。

const url = 'https://jsonplaceholder.typicode.com/users'

export default {
  asyncData({ params }){
    return axios.get(url)
    .then((res) => {
      return { users: res.data }
    })
  }
}
</script>

axiosをいつでも使える状態に定義しておき、URLも変数に入れておく。
asyncDataは、コンポーネントをロードする前に非同期の処理を行えるNuxt.jsのメソッドです。
axios.getでAPIのデータを取得し、resにサーバーからのデータが格納される。usersと名前をつけることで呼び出しやすくしておく。

template

<template>
  <div>
    {{ users[0] }}
  </div>
</template>

axiosで受け取ったAPIのデータを、マスタッシュ構文で１件分表示する。

async, awaitで置き換える

axiosはPromiseベースのHTTPクライアントなので、先ほどのscriptの記述をasync, awaitで書き換えることができる。

script

<script>
const axios = require('axios')
const url = 'https://jsonplaceholder.typicode.com/users'

export default {
  async asyncData({ params }){
    const res = await axios.get(url)
      return { users: res.data }
  }
}
</script>

先ほどと同じ処理結果が得られる。

IDとユーザー名を表示

IDとユーザー名を表示を表示させるために、template側の記述を書き換える。

template

<template>
  <div>
    {{ users[0].id }}：{{ users[0].name }}
  </div>
</template>

このように表示されれば完了です。

おわりに

ここまでaxiosを使った非同期通信についてまとめました。
非同期については完全な理解がまだできていないので、引き続き復習を進めていきます！
以上、最後まで読んでいただきありがとうございました！