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

URL: https://webrandum.net/nuxt-axios-module/
公開日: 2022-04-04
更新日: 2022-04-04
カテゴリー: コーディング
タグ: Nuxt.js
出典: Webrandum（著者: サイトウ マサカズ）

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

## axios-module

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

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/11/eyecatch-1.jpg)HTTP通信をラクに実装できる「axios」の基本https://webrandum.net/javascript-axios最近、HTTP通信にaxiosを使う機会があったので、基本的な使い方からエラー処理などまで、備忘録として基本的な部分をまとめておきます。axiosまずaxiosは「アクシオス」と読み、もともとギリシャ語で「値する」という意味らしいです。PromiseベースのHTTPクライアントで、非同期なHTTP通信が簡単に実装できます。また、Vue.jsでは非同期通信にaxiosを使うことがスタンダードになっています。インストール方法npmを使ってインストールする場合は下記。$ npm install axios --saveyarnの場合は下記コマンド。$ yarn add axiosCDNを利用す...](https://webrandum.net/javascript-axios)

### Nuxt.jsへの導入方法

Nuxt.jsでaxiosを使用する場合は「[nuxt-community](https://github.com/nuxt-community/axios-module)」から公開されている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](http://jsonplaceholder.typicode.com/)という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`の場合は、レスポンスデータのみが直接取得されます。

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