Nuxt独自

【Nuxt.js】非同期通信まわりまとめ

前置き

非同期通信まわりって
結構むずかしいですよね?、、、

どれが何の役割で
どこに書いて、
どれと何を組み合わせれば良いの!?🙄💦

と思った人は私だけではないはず。。。

asyncasyncDataって何が違うの?
try.thenって似てるような?
最初はとにかく混乱しました😂笑

それぞれの役割を確認し、
ベースのコードに肉付けしていき、
コードを書く流れが
分かるようにしました🙌💕

⬇️過去記事で詳細を確認したい方はこちら
【Nuxt.js】Nuxt文法編:非同期通信やasyncDataの使い方
【Nuxt.js】Nuxt文法編:try/catch
【Nuxt.js】Nuxt文法編:fetch
【Nuxt.js】nuxt/axiosを導入しよう


役割

非同期通信のグループ化

あくまでもグループ化だけで
通信自体は他の物に任せます🙏

methods発火など
アクションを起こさずとも
非同期通信したい時に使います💡

asyncData
returnで値を返す時、
Vuexを使用しない時

fetch
値を返さない時
Vuexを使用する時に使います🍀

asyncData

fetch


通信とPromise

通信

axios

データの通信自体をするものなので
asyncData, fetch内で使用

Promise(.then/.catchまたはasync/awaitを使用)

.then/.catch

Promiseです。
axiosの通信に対してなので、
axiosの後ろに書きます✍️
通信が成功した場合が.then
通信でエラーの場合が.catch

async/await

必ずセットで使用💫
asyncが非同期通信するもので
awaitPromise
=空のデータが返ることを防ぐ
.thenの代わりにもなるので、
.then/.catchまたは
async/awaitどちらか1つを使用します🍀

asyncは非同期を担うので
asyncData部分に書き、
awaitは通信をするaxios部分に書きます✍️


その他

try/catch

例外処理、
エラーハンドリング

非同期通信のasyncに対しての
実行式になるので、
asyncでネストさせて書きます✍️


流れ

asyncData

非同期通信のグループ化
ベースはこんな感じ


axios

asyncData
あくまでもグループ化するだけなので
肝心の通信自体はaxiosで行います。


Promise

ただこれだと、
axiosからデータが返ってくる前に、
空のデータを返してしまうことがあります。
それを防ぐためのPromise(await)

.thenの中で更に.thenを使いたい場合
tryasync/awaitを使って
.thenで右にどんどんズレる現象を
なくしていくことも大事ですね✨🧹


サンプルコード

asyncData, async/await, try, axios


fetch, async/await, axios


まとめ

ややこしいですが
役割を理解するだけで
読み書きのしやすさが
だいぶ変わるかと思います🍀

-Nuxt独自
-,

© 2021 aLiz Nuxt