時間のかかる処理を待つ

通信でデータを取りに行く、少し待ってから処理する——こうしたすぐには終わらない処理は、これまでの章の書き方では扱えない。上から下に順番に実行される、という前提が崩れるからだ。この章では、その「時間のかかる処理」を扱う3つの考え方を身につける。

まず Promise。「あとで結果が届く約束」を表すオブジェクトで、成功した・失敗した・まだ分からないの3つの状態を持つ。結果を受け取るには .then() を、失敗を受け取るには .catch() を使う。この節目を理解しておくと、あとの2つが理解しやすくなる。

つぎに async / await。.then() を重ねて書くと、処理が増えるほど入れ子が深くなって読みにくくなる。async を付けた関数の中では await を使うことで、非同期の処理を同期の処理と同じ見た目で、上から下へまっすぐ書ける。中身は Promise そのものだけれど、書き味がまるで違う。

さいごに非同期のエラー処理。通信は失敗することが前提の処理だ。サーバーが落ちている、回線が切れている、応答が想定と違う——起こりうる失敗はいくつもある。await した処理の失敗は、これまで覚えた try / catch でそのまま受け止められる。同期の処理と同じ道具で非同期の失敗にも備えられる、という発見がこの章の締めくくりになる。

この章を終えると、「通信して、受け取って、画面に出す」という現場のフロントエンド開発の骨格が一通り手に入る。