▼ 前回の Promise 編はこちらです。
「非同期処理とは？」という部分については Promise 編で解説したのでよければご覧ください。
今回は非同期処理を同期処理のように実行できる async , await 構文についてみていきます！
async , await 構文の使い方
async は関数を非同期関数にするキーワードです。
await は async をつけた非同期関数の中で非同期処理を行う部分の頭につけることで、処理結果を待つことができます。
※ ES2022 で async 関数の外でも使えるトップレベル await が登場しましたが、訳がわからなくなるので一旦放っておきましょう
言葉だけではさっぱり分からないので、実際にコードを見ていきましょう。
async function example() {
// 非同期処理を実行するコード
const result = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
// 非同期処理の結果を使用するコード
console.log(result);
}
// 参考: https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous/Promises
実行するとこのような Response オブジェクトが表示されたでしょうか？
この部分が console.log(result); の実行結果です。
コードを見ていきましょう。
まずは async キーワードを使用して非同期処理を実行する関数 example を定義しています。
次に await キーワードを使用して fetch の処理結果を待機します。
これで example の中では fetch の処理が終わるまでその他の処理が行われなくなりました。
console.log の実行は fetch が終了するまで待ってくれるので、結果を result に格納してコンソールに表示することができましたね。
では、下にコンソールを足してみましょう。
async function example() {
// 非同期処理を実行するコード
const result = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
// 非同期処理の結果を使用するコード
console.log(result);
}
example();
console.log("hello!")
？？？
"hello!" が先に表示されていますね。
一見不可解なようですが、 async をつけた関数は非同期関数になります。つまり example 自体が非同期で処理され、console.log("Hello") と並列に処理されているのです。
不可解な動作を防ぐための重要ポイントなので覚えておきましょう。
まとめ
-
async: 非同期処理を実行する関数を定義するキーワード -
await: 処理結果を待機するキーワード - async 関数は非同期処理されるので注意！