【Nuxt.js】Nuxt文法編：asyncData

前置き

2021/02/19
数カ所間違いがあり、
取り消し線をつけました。
申し訳ございません。
また、訂正版の記事を公開しました！
こちらをご覧ください✨👀
【Nuxt.js】Nuxt文法編：非同期通信やasyncDataの使い方

非同期通信で使うasyncData
まとめました📚🙋‍♀️

非同期通信とは
Promiseとは
asyncDataの役割と書き方(Promiseとasync/await)

分かるところは飛ばしてくださいね ✈️

非同期処理とは

こちらのツイートが分かりやすいかと思います💡

結果を待たずに
すぐに処理ができるということです🏃‍♀️💨

Q. 非同期処理ってなんですか？

A.
コンビニの店員さんが、「温めますか？」と言った後、温めてる間に別のお客さんの会計やりつつ、温め終わったら商品くれるやつ
— いちくん (@tips__web) July 16, 2020

温めた商品が手元にくる前に
会計を先に済ませることができる
というわけです！

これが同期処理なら
温めてる間はずっと店員さんが
レンジの前にいて、
温め終わってからでしか会計できません。

コードでいうなら…
⬇️の例でご覧ください🌟👀

Promise

Promiseとは

値が今すぐは返せないけど、
その間に仕事はできるし、
後でちゃんと返すから！！
という物です💡

効率よく仕事を回せる、できる人✨🙋‍♀️
そんなイメージです。

簡単な例

自分のIPアドレスを表示させるjsonファイル
http://icanhazip.com
を使用しています🌟

解説

awaitがPromiseにあたる部分です！

通信自体はaxiosで行います。
async awaitはセットで使います。

詳しい書き方は
asyncDataで解説するので、
Promiseってこういう物なんだ！
と理解できればOKです🙆‍♀️

awaitでIPアドレスを取得するまでに
非同期でお仕事をしています。

先ほどのコンビニの例でいうと…🏪
温める商品 = IPアドレス
会計 = console.log

今回は分かりやすく
console.logを表示するのみです🍒

axiosの解説はこちらです💡
https://wp.me/pc9NHC-gr

コード

こんな感じで書きます✍️

) pages

<template>
 <div class="page">
  {{ ip }}
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {
    // このjsonをゲットするまで非同期でお仕事します
    const data = await axios.get('http://icanhazip.com')
    console.log(data)
    return { ip: data.data }
  },
}
</script>

</div>

</template>

import axios from 'axios'

export default {

async asyncData() {

// このjsonをゲットするまで非同期でお仕事します

const data = await axios.get('http://icanhazip.com')

console.log(data)

return { ip: data.data }

}

</script>

asyncData

asyncDataとは

通信自体はaxiosの役割ですが、
ここからここまでが非同期通信してますよ、
ってグループ化するのがasyncDataです🌟

つまり非同期通信、
これ自体はasyncDataがなくてもできます！
ただasyncDataを使うことで
通信のタイミングが変わります。

使い方自体はfetchと似ています💡

ページ コンポーネントがローディングされる前に常に呼び出されます。

asyncData メソッド内の this を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に このメソッドが呼び出されるからです。
https://ja.nuxtjs.org/guide/async-data/

書き方は2種類

Promiseを返す

.then
Promise
try

ではこの中の .then で
axiosの記事でも使った
jsonplaceholderのpostsを
表示させてみましょう🌟
https://jsonplaceholder.typicode.com/posts

コード

.thenで通信が成功したら
res.dataが帰ってくる間に
お仕事しております✨👩‍💻
今回も簡単にconsoleを表示するだけ🍒

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  asyncData () {
    return axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((res) => {
        console.log('結果が帰ってくるまでお仕事')
        return { posts: res.data }
      })
  },
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

asyncData () {

return axios.get('https://jsonplaceholder.typicode.com/posts')

.then((res) => {

console.log('結果が帰ってくるまでお仕事')

return { posts: res.data }

})

}

</script>

async/awaitを使う

awaitがpropmiseにあたるイメージです🌟
必ず async と await セットで使います👭

コード

await 直後の
axiosで通信し
その結果が返されるまで(returnされるまで)
consoleを表示しています💡

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    console.log('結果が帰ってくるまでお仕事')
    return { posts: res.data }
  }
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

async asyncData () {

const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

console.log('結果が帰ってくるまでお仕事')

return { posts: res.data }

}

</script>

動的なルートデータへのアクセス

こちらもaxiosの記事
step5: queryを使って取得
の続きです🌟

asyncDataを使ったバージョンを書いていきます✍️
コンテキスト(context)を使ってやっていきます！

context パラメータを利用して動的ルートデータにアクセスすることもできます。たとえば、動的ルートパラメータには、それを設定したファイルまたはフォルダの名前を使用してアクセスできます。
https://ja.nuxtjs.org/guide/async-data/

解説

asyncData
ここは非同期の部分ですよ、
とグループ化

asyncとawaitはセットで使い
awaitがpromiseの役割をする
値がreturnされるまでは
別の作業ができる

コード

before

) pages

<template>
 <div class="page">
   <ul>
     <li v-for="post in posts" :key=post.id>
       {{ post.title }}
     </li>
   </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
 data () {
   return {
     posts: [],
   }
 },
 mounted () {
   axios.get('https://jsonplaceholder.typicode.com/posts/' + this.$route.params.id)
     .then((response) => this.posts = response)
 }
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

posts: [],

}

mounted () {

axios.get('https://jsonplaceholder.typicode.com/posts/' + this.$route.params.id)

.then((response) => this.posts = response)

}

</script>

after

スッキリさせるために
title1つだけ表示させてます🙋‍♀️

) pages

<template>
 <div class="page">
   {{ title }}
 </div>
</template>

<script>
import axios from 'axios'

export default {
  asyncData ({ params }) {
    return axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
    .then(( res ) => {
      return { title: res.data.title }
    })
  },
}
</script>

</div>

</template>

import axios from 'axios'

export default {

asyncData ({ params }) {

return axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)

.then(( res ) => {

return { title: res.data.title }

})

}

</script>

もっとスマートに書くと

<template>
 <div class="page">
   {{ title }}
 </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

</div>

</template>

import axios from 'axios'

export default {

async asyncData ({ params }) {

const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)

return { title: data.title }

}

</script>

まとめ

Promiseで結果が返されるまでに非同期通信で別のことができる
asyncDataはその非同期通信のまとまり
そのまとまりの中にPromiseまたはawait(async/await)がある