WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

axios-module

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

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

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(サーバーサイドレンダリング)するためのものです。

createdmountedだと、ページコンポーネントがロードされた後に実行されてしまうので、基本は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の場合は、レスポンスデータのみが直接取得されます。
ステータスコードやステータステキストを使ってエラー時の分岐をしたりする場合は取得されないので、書き方によって違いがあると注意しておく必要があります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね