女性向けエンジニアスクール
Promise.all で同時に待つ
非同期JavaScript：API通信とモジュール / 全 5 枚
非同期JavaScript：API通信とモジュール - Promise.all で同時に待つ
関係の無い取得まで順番待ちさせている
作品一覧・プロフィール・タグ一覧は、どれも互いの結果を使いません。それでも await を3行並べると、1つ目が終わるまで2つ目は始まらず、待ち時間が足し算になります。
3つとも先に始めてしまい、全部そろうまで1回だけ待つ。それを1行で書けるのが Promise.all です。
どれも前の行の結果を使っていないのに、順番に待っています。
const works = await fetchWorks(); // 400ms
const profile = await fetchProfile(); // 300ms
const tags = await fetchTags(); // 200ms
// ここに届くまで 900ms かかっている1 / 5
← → キーでも送れます