JSのawaitキーワードはasync関数の直前に置く必要はない。関数の直前におく、というのは以下のような書き方
const result = await fetch(url);
必ずしもこのように書く必要はなく、以下のようにも書ける
const p = fetch(url); const result = await p;
awaitキーワードはpromiseがresolveするのを待つものである。async関数が返すのはpromiseであるので一旦変数に入れてからawaitしても良い。
これはとても重要なテクニックである。これによって複数のasync関数を並行して実行することができるようになるのだ
const result1 = await fetch(url1); const result2 = await fetch(url2);
という書き方の場合、fetch(url1)
の完了を待ってからfetch(url2)
が実行される。並行実行される事はない
一方
const p1 = fetch(url1); const p2 = fetch(url2); const result1 = await p1; const result2 = await p2;
この書き方の場合、fetch(url1)
の完了を待たずにfetch(url2)
の実行が開始される。つまり複数のHTTPリクエストを並行して実行できるのである。JSはシングルスレッドだがfetchのような非同期関数は並行実行が可能なのである。
複数のfetchを実行する場合、リクエスト先のサーバ側に余裕があり、それぞれのリクエストが独立したものであるならば並行で送ってしまったほうがフロントのパフォーマンスが向上する場合もあるだろう。うまく使い分けたい。
こちらの記事の結論部分には、非同期処理の並行処理とそれぞれの結果の集約が簡単に書ける、というメリットも付け加えておきたい