Nuxt.js + axiosで非同期データ通信ハンズオン風

ここで言う非同期データ通信とは

• apiサーバからデータを取得してページ上に表示することとします。

前提

• npm v5.2.0以上がローカルまたは開発環境に入っていること

プロジェクト作成

create-nuxt-app [プロジェクト名]

• こんな感じで選択（Axiosを選択）

• package.jsonにaxiosが入っていることを確認

package.json

{
  "name": "async-test",
  "version": "1.0.0",
  "description": "My supreme Nuxt.js project",
  "author": "yosuke0517",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2"
  }
}

動作確認（とりあえずデフォでOK）

学習で使うデータを作る

JSONPlaceholderというWebサービスを使用。実際の実務でもデータを用意するコストを省くことができる。

• 今回はusers/のデータで実施する

• 以下のURLでアクセスすると擬似的なusersのデータを取得できる

データを取得して表示する

• index.vueの余計な箇所を削除し先ほどのurlから単純にデータを取得し表示（以下のようになっていればOKでstyleタグは削除）

index.vue

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

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

export default {
  asyncData ({ params }) {  //コンポーネントを初期化する前に非同期処理を行えるようにするメソッド
    return axios.get(url) //apiからのデータ取得をリクエスト
      .then((res) => {  //thenはレスポンスを受け取った段階で呼ばれるメソッド(res)にはレスポンスデータが入っている
        return { users: res.data } //res.dataにはjsonオブジェクトが入っている
      })
  }
}
</script>

• 結果

1人分のデータを取り出して表示する

• 考え方
  • 配列となっているためインデックスを指定したりキーを指定したりするだけ

index.vue

{{ users[0] }}

とか

index.vue

{{ users[0].id }},{{ users[0].name }}

とか

• 結果

v-forで複数のデータをリストで表示する。

• 考え方
  • v-forを使う

index.vue

<!--{{ users[0].id }},{{ users[0].name }}-->
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.id }},{{ user.name }}
        </li>
      </ul>

• 結果

エラーハンドリング

• 状況

  • 404エラーが発生したとする

• index.vue内のurlを存在しないurlへ変更

  • 例）const url = 'https://jsonplaceholder.typicode.com/usersxxx'

• 考え方

  • 引数にerrorを入れてcatchメソッドで処理する

index.vue

export default {
  asyncData({ params, error }) {
    return axios.get(url) 
      .then((res) => {
        return { users: res.data }
      })
      .catch((e => {
        //errorメソッドにはステータスコードと表示するメッセージを指定する
        error({ users: e.response.status, message: '404Error!!!!!' })
      }))
  }
}

とりあえず以上です。