JavaScript入門 練習問題 7:async/await基本(非同期処理の実行順序)
次のasync/awaitを使用したコードの実行結果として正しいものはどれですか?
```javascript
async function fetchUserData() {
console.log("1: データ取得開始");
const userData = await fetch('/api/user')
.then(response => {
console.log("2: レスポンス受信");
return response.json();
})
.then(data => {
console.log("3: JSON解析完了");
return data;
});
console.log("4: 取得したデータ:", userData.name);
return userData;
}
console.log("0: プログラム開始");
fetchUserData();
console.log("5: プログラム継続");
```
- 0 → 1 → 2 → 3 → 4 → 5 の順番で実行される
- 0 → 1 → 5 → 2 → 3 → 4 の順番で実行される
- 0 → 2 → 3 → 1 → 4 → 5 の順番で実行される
- awaitがあるため1で処理が完全に停止する
- 0 → 1 → 2 → 5 → 3 → 4 の順番で実行される
Qraftユーザーの成績:正答率 60%(6/10回正解)
正解と解説を見る
async関数はawaitに到達するまでは同期的に実行され、awaitで一時停止してもJavaScriptエンジン全体は止まらず、呼び出し元の残りのコードが先に実行されます。正しい順序は「0→1→5→2→3→4」です。
【正解の理由】
fetchUserData()が呼ばれると「1: データ取得開始」まで同期実行され、await地点で一時停止します。その間にメインスレッドの「5: プログラム継続」が先に実行され、fetch通信が完了した後にイベントループで「2→3→4」が実行されます。
【不正解の理由】
• 0→1→2→3→4→5:awaitで一時停止した関数の続き(2,3,4)より先に、メインスレッドの「5」が実行されます。
• 0→2→3→1→4→5:fetchUserData()が呼ばれる前に、その内部処理(2,3)が実行されることはありません。
• awaitがあるため1で処理が完全に停止する:awaitは「その関数だけ」を一時停止させるものであり、プログラム全体を止めるわけではありません。
• 0→1→2→5→3→4:「2: レスポンス受信」はfetch通信が完了してから起こるため、同期処理である「5」より先に実行されることはありません。