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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 この記事はWP専用です
https://wp.me/pc9NHC-192

前置き

非同期通信について解説していた
こちらの記事で間違いがありました。
申し訳ございません🙇‍♀️

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

何が間違っていたのか

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

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

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

<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から
データを取得しているだけのコードです。
このコードを見ながら整理していきます。

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-192