awaitはasync関数の直前に置く必要はない

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を実行する場合、リクエスト先のサーバ側に余裕があり、それぞれのリクエストが独立したものであるならば並行で送ってしまったほうがフロントのパフォーマンスが向上する場合もあるだろう。うまく使い分けたい。

qiita.com

こちらの記事の結論部分には、非同期処理の並行処理とそれぞれの結果の集約が簡単に書ける、というメリットも付け加えておきたい

型による条件分岐について

はてブのコメントにはポリモーフィズムすべきだ、型による分岐したら負けだ、みたいなコメントが散見されるけど、それはJavaなど静的型付けのクラスベースオブジェクト指向言語の話であって、JSはそうではない。TSはクラスベースのような顔をしてるが正体はJSなので、やはりインターフェース継承とメソッドオーバーライドによる多態性で条件分岐を隠蔽するような言語ではない。

qiita.com

Javaのようなクラスベース言語でもサブタイプ多相には限界がある。例えばドメインエラーを型で表現するということはJavaでも一般的に行われると思うけど、Webアプリケーションならば、そのドメインエラーの型によってHTTPステータスコードを切り替えなくてはならないだろう。この分岐をサブタイプ多相でやるとドメイン層のエラーオブジェクトが、自分がどのHTTPステータスコードにマップされるか知ってなくてはならない。HTTPの知識がドメイン層に入ってしまってはドメインとは・・・となってつらい

ドメイン外の挙動を分離するためにDIで制御の反転というテクニックを用いたり、非ドメインクラスに詰め替えるという処理を行ったりするが、エラー処理如きでそんなことをするのは面倒で普通に地獄だし、だったら素直に型でパターンマッチして分岐したほうがシンプルで分かりやすいわけですよ。Scalaではドメイン層の処理結果をEitherで返して、Leftだったら型を見てレスポンスのステータスコードを決定するような処理をコントローラメソッドに書いたりする。Javaでもthrowされた例外クラスの型でcatch対象選べるけど、あれも型による分岐の一種であろう。

ポリモーフィズムが常に万能というわけではないし、JSは関数オブジェクトを用いたり、コールバックとかイベントという仕組みで分岐できるので、あえてポリモーフィズムを使う必要もあまりない。