Promise によってコードは整理されましたが、まだ.then()といった独特な書き方が必要です。
async/await を使えば、非同期処理をまるで「普通の同期処理」のように、上から下へ順番に書くことができます。
前章のコールバック地獄や、Promise のチェーンに比べて、処理の順番が一目でわかります。
現在の現場では、この書き方が最も一般的です。
async（エイシンク）
非同期処理を含む関数に付けるキーワードです。
await（アウェイト）
Promise の完了を待つキーワードです。Promise の結果が出るまで、その行で一時停止します。
10.2.1 async/await を使用したプログラム
前の項の処理が async/await を用いると、一層シンプルに記述できるのを確認しましょう。
ソースフォルダ：public/ch10
ファイル名：async-await.js
➢ async-await.html
前の章で作った ch10/delay2.html をコピーし、ch10 にペーストしてください。
その際に、ファイル名を async-await.html に変更します。
ファイル内の delay2.html や delay2.js の記述も、async-await.html や async-await.js に修正します。
➢ async-await.js
// async-await.js
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 非同期関数を定義します
async function runTask() {
alert("処理を開始します。");
await delay(1000); // 1秒待つ（終わるまで次に行かない）
alert("1秒経過しました！");
await delay(2000); // さらに2秒待つ
alert("さらに2秒経過して、すべての処理が終わりました。");
}
runTask();
実行結果
解説
今回のサンプルは、一つ前の delay2.js とほとんど変わりませんが、async と await の２つのキーワードのおかげで、よりシンプルに記述できるようになりました。
await キーワードは、async キーワードを用いた function の中でしか使えないことに注意してください。
7: // 非同期関数を定義します
8: async function runTask() {
9: alert("処理を開始します。");
10:
11: await delay(1000); // 1 秒待つ（終わるまで次に行かない）