Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する｜Nuxt.jsの基本

Nuxt.jsでAPIと連携してデータを取得する方法はいくつかありますが、今回は「axios-module」というモジュールを使用します。

axios-module

axios-moduleは、HTTPリクエストを簡単にするための「axios」をさらに便利に扱うためのモジュールです。

axios自体は過去に記事にしたことがあるので、そちらもご覧ください（Nuxt.jsに限らず、純粋なJavaScriptの使用例になります）。

Webrandum

HTTP通信をラクに実装できる「axios」の基本

https://webrandum.net/javascript-axios

Nuxt.jsへの導入方法

Nuxt.jsでaxiosを使用する場合は「nuxt-community」から公開されているNuxt.js用のパッケージがあるので、こちらをインストールします。

$npm install -D @nuxtjs/axios

$yarn add @nuxtjs/axios

インストールができたら、nuxt.config.jsを開きます。
このファイルがNuxt.jsの設定ファイルで、インストールしたモジュールを読み込むように設定します。

modulesという項目があるので、その配列内に'@nuxtjs/axios'を追加します。

module.exports = {
  // 省略 //
  modules: [
    '@nuxtjs/axios'
  ],
  // 省略 //
}

これでNuxt.js内でaxiosが使えるようになりました。

axios-moduleの使用

asyncDataで読み込み

Nuxt.jsの独自メソッドに「asyncData」があります。
これはページコンポーネントがロードされる前に実行されるメソッドで、SSR（サーバーサイドレンダリング）するためのものです。

createdやmountedだと、ページコンポーネントがロードされた後に実行されてしまうので、基本はasyncData内でaxiosを使ってAPIのロードを行います。

下記はJSONPlaceholderというAPIを実際に取得するときのサンプルコードです。

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get("https://jsonplaceholder.typicode.com/todos",{
      params: {
        userId: '1'
      }
    })
    return {
      data: response.data
    }
  }
}
</script>

axiosの詳細な使い方

axios.get()で第一引数にAPIのエンドポイントを指定し、第二引数に渡すパラメータなどを指定します。

そして取得したデータはasyncData内でreturn{}で返して使用します。

$axios.getと$axios.$getの違い

$axios.getで取得する場合は、レスポンスが下記のようになります。

{
  "data": [], // レスポンスデータ
  "status": 200, // ステータスコード
  "statusText": "", // ステータステキスト
  "headers": {},
  "config": {},
  "request": {}
}

実際に取得したいデータは「data」内に入っています。

$axios.$getの場合は、レスポンスデータのみが直接取得されます。
ステータスコードやステータステキストを使ってエラー時の分岐をしたりする場合は取得されないので、書き方によって違いがあると注意しておく必要があります。