Vueと共通

【Nuxt.js】非同期通信awaitのネストやチェーンについて

前置き

今回はasync/await
Promiseの役割をする
awaitについてです💫

2つのパターンについて書いていきます。
awaitawaitをネスト
await.thenのメソッドチェーン

そもそも今までの記事では
const res = axios.get
みたいな取得した値を定数にして
その後で取得した値が返ってきた時の
処理を書いていました。
なのでそれ以外の使い方、
定数を使わなくても良い書き方が
すごく変に感じていたのです。。。

例えばfirebaseAuthで
アカウントを作成した後に
dispatchしたい場合
こんな感じのコードになります👇

これをもし
const res = await
にしてしまうとそれ以降
resを使用する必要がないため、
どうすれば良いのか
分からなかったのです🤔💭

ただこの2つのパターンを理解すれば
簡単ということが分かりました❣️☝️
ということでLet's Go❗️

⬇️Promise
 async/await
 簡単な使い方などは
 こちらをご覧ください🍀
【Nuxt.js】非同期通信まわりまとめ
【Nuxt.js】Nuxt文法編:非同期通信やasyncDataの使い方

参考:
ES2017でawaitのネストを避ける
【Nuxt.jsで近くのお店を探すアプリを作成】#4 async/await


awaitはPromiseで処理を止めるもの

ではまず
awaitがそもそも何か❓

ようは処理を止めるものです💥✋
awaitの処理が終わるまでに
止めておきたい処理を
中に書けば良いということです✍️

awaitの処理が終わるまで、
他の処理を停止させる
といった方が良いかもしれません。

.thenの場合は
「それが成功したら」の意味合いなので
日本語に置き換えた文法的に
しっくりきていました。
なので、
止めたい処理を書く
ということが最初は
中々理解できませんでした。。。
簡単に理解したいから
日本語に置き換える…
これはやめた方が良いですね。


コード例①

⬇️簡単なコードはこちら
 前置きと同じコードです。

awaitが終わってからの処理を
その下に書いていきます。
この場合はfirebaseAuthの
アカウント作成が完了してから
dispatch('checkLogin')


コード例②

awaitの後ろの.thenが省けます。

before

after


awaitのネストか.thenが必要な時とは

では今回の2つのパターンに
当てはまるコードは
どんな場合だと思いますか❓

こちらのコードを見てください👀
firebaseのStorageに
putが成功してから
getDownloadURLしたい(★部分)
このまま書いてしまうと、
オブジェクトがないというエラーです💥

これはStorageの公式コードにも
.thenが使われています。
Download Data via URL

Promiseの使用が必要です。
つまり今回の2つのパターンに当てはまります。


Aの処理をしてからBの処理をしたい

ではawait内で、
更にawaitしたい場合はどうなるのか。
BでAの値を取得してから処理をしたい❗️
Aの処理を先にしてからBの処理をしたい❗️
って場合ですね🍀

おさらいですが、
この2つのパターンを使用します。
awaitawaitをネスト
await.thenのメソッドチェーン

await.thenの代わりなので、
個人的にはせっかくなら
awaitで揃えた方が良いなぁ🎈🧸
と思いますが、
awaitのネストが嫌😖💦
という方もいるので、
お好み&チームに合わせて
どちらもできるとGood⭕️
まぁawaitに限らずですが。


awaitのネスト

単純にawaitのネストをすればOK。
関数を分ける場合に有効。
async A() { await hogehoge }
async B() { await (await A()) hogehoge }

firebase関連でできるコードサンプル
探し中です🔍


.thenでメソッドチェーン

awaitの処理が終わってから
やりたい処理を.then以降に記載✍️

async A() { await hogehoge.then(() => { hogehoge })}

処理によってはawaitのネスト不可

目次「awaitはPromiseで処理を止めるもの」内
「awaitのネストか.thenが必要な時とは」
で出したAuthとStorageを
使用したコードが良い例です💡

registerしてupdateProfileしたい場合
await dispatchをしてもうまくいきません。
updateurlが見当たらなくなってしまいます。
error 'url' is not defined

updateregister内でしか
使わない前提の場合は
分ける必要がないのですが。
そして公式コード的にも
.thenが良さそうです。
Download Data via URL

なのでこの場合は
awaitの後に.thenで繋げる
メソッドチェーンを使用🍒
正しいコードはこちら👇


まとめ

awaitのモヤモヤが
スッキリしました✨
awaitのネストを使用したいのですが、
firebaseで試せるものが
まだ見当たらないため、
発見次第のせていきます🔍

-Vueと共通
-,

© 2021 aLiz Nuxt