【今日からはじめるNuxt.js】非同期データ通信について

nuxt-js vue

今回は、Nuxt.jsにおける非同期データ通信について記事を書いていきたいと思います。

目次

  1. はじめに
  2. 実装準備(axios、利用するデータなど)
  3. 1件のデータを取得する
  4. 複数のデータを取得する
  5. エラーを処理する
  6. おわりに

1.はじめに

この記事では最初に非同期データ通信と書きましたが、わかりやすくいうと

Nuxt.jsにおいてサーバからデータを取得して、ページに表示する実装について書いていきます。

2.実装準備

axios

axiosとは、ものすごくざっくりいうと”APIを呼び出してデータを取得したいとき”に簡単に実装ができるパッケージです。

素のJavaScriptを使っても実装可能ですが実装が大変なので、axiosを是非使いましょう。

create-nuxt-appコマンド(プロジェクトを作成するコマンド)実行時の対話形式の際に

インストールすることができますが、その際にインストールしていない場合は以下コマンドでインストールしましょう。

npm install axios

利用するデータ

利用するデータは、無料で様々なお試しAPIを公開してくれているJSONPlaceholderを利用したいと思います。感謝。

ユーザ情報を返却するAPIを使います。

3.1件のデータを取得する

まずはそもそもAPIを投げてデータを取得する実装をしてみましょう。

create-nuxt-app で作成したプロジェクトにデフォルトで用意されている「index.vue」を編集しています。

index.vue

<template>
  <div class="container">{{users}}</div>
</template>

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

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

まずは、<script>タグに着目しましょう。

const axios = require("axios");でaxiosメソッドが利用できるようにしています。

次にlet url = "https://jsonplaceholder.typicode.com/users";で取得先APIを定義しています。

asyncDataメソッドは、コンポーネントのデータをセットする前に非同期の処理を行えるようにするためのメソッドです。参照

asyncDataメソッドの中身は、axiosメソッドの実装です。指定したAPIをgetして「users」という変数に格納しています。

上記の実装では、取得したデータを<template>タグでそのまま表示しています。

アクセス結果

実装後、アクセス結果は以下のようになります。

最初の1件かつ、そのidと名前だけ表示したい場合、配列として取得しているので以下のように実装をしましょう。

<template>タグ部分のみ修正します。

index.vue(一部抜粋)

<template>
  <div class="container">  {{users[0].id}},{{users[0].name}}</div>
</template>

アクセス結果

1件かつ特定の項目だけ取得することができました。

4. 複数のデータを取得する

複数のデータの取得したい場合も、そんなに実装は変わりません。

取得したデータをどう表示するかという<template>タグ部分の実装を変更するだけです。

index.vue(一部抜粋)

<template>
  <div class="container">
    <ul>
      <li v-for="user in users" :key="user.id">{{user.id}},{{user.name}},{{user.company.name}}</li>
    </ul>
  </div>
</template>

上記については、Vue.jsの話になってきますね。v-forについては別途記事を書く予定ですｗ

今、気になる方はv-forについて調べてみてください。

5.エラーを処理する

API取得時にエラーが発生する事は当然ながらあります。

そういった場合にエラーページを出力するなどの処理は以下のように実装します。

index.vue(一部抜粋)

<script>
const axios = require("axios");
let url = "https://jsonplaceholder.typicode.com/usersああああ";

export default {
  asyncData({ params, error }) {
    return axios
      .get(url)
      .then(res => {
        return { users: res.data };
      })
      .catch(e => {
        error({ users: e.response.status, message: 'エラーが発生しました' });
      });
  }
};
</script>

catchでエラーをキャッチして、この実装ではエラーページを出力しています。
(取得先APIのURLをワザと間違えています)

アクセス結果

6.おわりに

いかがだったでしょうか。
APIでデータを取得して画面に表示するなどはアプリケーションを作成する上で
必ず必要になると思いますので、ここらへんも押さえておきたいです。

それでは！