前回の記事までで、JavaScriptの非同期処理がどのように変遷してきたのか整理。
Promiseの登場によって非同期処理の記述が容易になったことがわかりました。
それでもthenを用いた非同期処理はコールバック関数が必要なため、コードがネストしてしまい、以下のような同期処理と比べると可読性が下がります。
const post = getPost(postId);
const user = getUser(post.userId);
const org = getOrganization(user.orgId);
そこで、同期処理のような書き味と非同期処理を両立した書き方が望まれるようになり、asyncとawaitが導入されました。
await
awaitとは、非同期処理の完了を待つためのキーワード。
Promiseの値が参照できるようになるまで、awaitより下に書かれた処理に進まないようにする役割を持つ
awaitの特徴
- 関数呼び出しにawaitをつけた場合、戻り値に代入される値はPromiseではなく、Promiseが約束した値になる。
- つまり、Promiseが解決するまで次の行に進まない。
- 一見同期処理のように見えるかもしれないが、プログラム全体の進行がブロックされるわけではない。
- await式が影響を及ぼすのは、それ以降に書かれたタスクだけで、別のところに書かれたタスクには影響しない。
async
asyncは非同期関数を宣言するためのキーワード。
このキーワードがついた関数は必ずPromiseを返すようになる。
asyncの特徴
- 例えば、return文などで単に文字列を返す関数の場合、戻り値は単に文字列ではなく、文字列のPromiseになる。
- asyncをつけた非同期関数では、await文が使えるようになる。
- 逆にawait文が使えるのは非同期関数の内部だけ。
async/awaitを使うことで非同期処理を行なっているにも関わらず、直感的で同期処理のように書くことが可能になる。
この書き方によって理解が容易で、可読性も高まるため、非同期処理が頻繁に行われる現代のJavaScriptプログラミングにおいて極めて有用な構文。
今回の記事もSoftware Design 2023年9月号の内容をまとめています。
▼参考文献