async と await

解説

このレッスンで分かること

• await は中身が確定するまで、その関数だけを中断します
• 前の結果を次に使いたいときは、await を縦に並べます

続きの処理が、どんどん奥へ押し込まれていく

.then に関数を渡す書き方には、ひとつ不便なところがあります。受け取った値を使う処理が、全部その関数の中に入ってしまうことです。届いた値をもとに次を取り、さらにその結果を使う、と続けるたびに、コードは奥へ奥へ沈んでいきます。

await を使うと、この沈み込みが消えます。中身が確定するまでその関数だけを中断し、確定したら続きから再開する、という書き方だからです。止まるのは関数の続きだけで、ページ全体は動いたままです。

1 行目でプロフィールを取り、2 行目でその中の値を使ってバッジを取っています。2 行目は 1 行目の結果が無いと始められないので、順番に待つのが正しい書き方です。上から下へ読める形になるところが、await のいちばんのありがたみです。

await は async を付けた関数の中でしか書けません。付け方は関数の書き方ごとに次のとおりです。

縦に並べた await は、待ち時間が足し算になる

前の結果を次に使うなら縦に並べるのが正しいのですが、互いに関係の無い 2 つを縦に並べると、待ち時間をむだに足しています。

この 2 つは互いの結果を使っていないので、本当は同時に始めてよいはずです。並べる前に「前の結果を使うのか」を一度確かめる癖を付けておくと、無駄な待ちを見つけやすくなります。

無い値を、次の await に渡さない

早期 return は非同期でもそのまま使えます。むしろ非同期のほうが重要で、無い値を次の await に渡すと、追いにくいエラーになります。

profile.level が無いまま fetchBadge(undefined) を呼ぶと、箱の中で落ちます。await を挟んだ先で落ちたエラーは、どこから来たのか分かりにくいので、渡す前に止めるのが安全です。

解説

async を付けた関数から return した値は、そのまま返るのではなく Promise に包まれて返ります。上の関数は文字列を返していますが、呼ぶ側が受け取るのは「あとで文字列が入る箱」です。呼ぶ側でも await を書いてください。

よくある間違い

• async を付け忘れて await を書く — 実行前に構文エラーになります。await is only valid in async functions のような文が出たら、外側の関数に async が付いているかを見てください
• forEach の中で await を書く — forEach は、渡された関数が Promise を返しても待ちません。下のコードは中の await が終わる前に return へ進むので、空の配列が返ります。順番に待ちたいときは for-of を使ってください

1. fetchWorkList(works) を作る。60 ミリ秒後に works をそのまま resolve する Promise を返す
2. fetchViews(work) を作る。60 ミリ秒後に work.views を resolve する Promise を返す
3. loadWorkSummary(works, id) を async function として作り、一覧を await してから id の作品を探す
4. 見つかったら「タイトル / 表示回数 回表示」の文字列を返す。見つからなければ fetchViews を呼ばずに「作品が見つかりません」を返す