여기서 말하는 비동기 데이터 통신이란

전제

프로젝트 만들기

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

이런 식으로 선택 (Axios 선택)

{
  "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)

학습에 사용할 데이터 만들기

이번은 users/의 데이터로 실시한다

데이터 검색 및 표시

<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인분의 데이터를 꺼내 표시

{{ users[0] }}

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

결과

v-for에서 여러 데이터를 목록으로 표시합니다.

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

결과

오류 처리

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!!!!!' })
      }))
  }
}

우선 이상입니다.