【Nuxt.js】Nuxt文法編：非同期通信やasyncDataの使い方

前置き

非同期通信について解説していた
こちらの記事で間違いがありました。
申し訳ございません🙇‍♀️
【Nuxt.js】Nuxt文法編：asyncData

ということで今回は
訂正ver.です。

何が間違っていたのか

【Nuxt.js】Nuxt文法編：asyncData > Promise > 簡単な例

このコード、
awaitでjsonデータをgetしてくるまでに
非同期でconsoleを表示したり
そのgetしてきたデータを表示させる
と書いています。

しかし、
jsonデータが返ってきていないのに
表示させることはできません🙇‍♀️

index.vue

<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>

他にも…
コードは上から実行し、
終わってから次のコードと思っていましたが、
javascriptは
コードの上から順番に実行されるとは
限らない仕様でした。。。
なのでaxiosなどからデータが返ってくる前に、
空のデータを返してしまうことがあるようです。

参考: Promiseとはなんぞや？！できるだけわかりやすく説明してみた（ついでにasync/awaitも)

そもそも非同期通信とは何か

動画を例にすると分かりやすいです💡

同期通信：
動画を全て読み込んでから再生
非同期通信：
全て読み込まなくとも、読み込めた所まで再生
その間にも読み込みを続ける

勘違いをしていた

⬆️のコードで私は
jsonデータが読み込めたところまでを表示する
と認識していたのですが、、、

これはそもそも
jsonデータが全く返ってきていない状態

何も読み込めていない状態で
それをやろうとしていたわけなんです。。。

非同期通信、await、asyncDataの整理

お馴染みのJSONplaceholderから
データを取得しているだけのコードです。
このコードを見ながら整理していきます。

index.vue

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

<script>
import axios from 'axios'

export default {
  async asyncData () {
    return await axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        return { posts: response.data}
        console.log(response.data)
      })
      .catch((error) => console.log(error))
  },
}
</script>

非同期通信async

外部データを使う場合に
同期処理だと処理が遅くなるため
非同期通信を使用します。

Promiseのawait

そもそもPromiseとは

javascriptはコードの上から
順番に実行されるとは限らない仕様💥
なのでaxiosなどからデータが返ってくる前に、
空のデータを返してしまうことがあります。
それを防ぐのがPromise💫

Promise本楽の書き方はこれ

index.vue

new Promise(function(resolve, reject) {}

awaitとは

本来の書き方よりも
スムーズにしたのがasync/awaitです💕
asyncとawaitは必ずセットで使います。

asyncが非同期通信
awaitがPromiseです。

asyncData

非同期通信のグループ化をします。

async created () { await } の代わりに
async asyncData () { await } といった使い方をします。

似た役割としてfetchがありますが、
呼び出しタイミングや
データのセット先が違うだけで
使い方はほとんど同じです🍎
【Nuxt.js】Nuxt文法編：fetch

まとめ

axios: API通信
async/await: 非同期通信とPromise
asyncData: 非同期通信のグループ化