Nuxt独自

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

前置き

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

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


何が間違っていたのか

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

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

と書いています。

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

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

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


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

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

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


勘違いをしていた

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

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

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


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

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

非同期通信async

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


Promiseのawait

そもそもPromiseとは

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

Promise本楽の書き方はこれ

awaitとは

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

asyncが非同期通信
awaitPromiseです。


asyncData

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

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

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


まとめ

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

-Nuxt独自
-,

© 2021 aLiz Nuxt