短い答え
- 通信のように終わるまで時間がかかる処理を、待つあいだ画面を止めずに扱うためにあります。
- Promise は「あとで結果が入る箱」で、成功か失敗のどちらかで終わります。
- async/await は、その Promise を上から順に読める形で書くための書き方で、失敗は try と catch で受けます。
深掘りの答え
動く順番
await で待つのは、その関数の中だけです。関数の外の処理は先に進みます。
JavaScript
function wait(value) {
return new Promise((resolve) => {
setTimeout(resolve, 100, value);
});
}
async function main() {
console.log("1 開始");
const msg = "2 届いた";
console.log(await wait(msg));
}
main();
console.log("3 先に進む");1 開始
3 先に進む
2 届いた「3 先に進む」が「2 届いた」より先に出るのが要点です。待っているあいだもほかの処理が動くので、画面が固まりません。
失敗の受け方
Promise が失敗すると、await の所で例外として投げられます。try と catch で受けて、利用者に伝える文を出します。
JavaScript
async function load() {
const err = new Error("失敗");
try {
await Promise.reject(err);
} catch (error) {
console.log("受け取った");
console.log(error.message);
}
}
load();受け取った
失敗catch を書かないと、失敗が誰にも受け取られず、画面には何も出ないまま止まって見えます。
面接官が見ている点
- 「非同期」を言葉だけでなく、動く順番で説明できるか
- await が待たせるのは関数の中だけ、と分かっているか
- 失敗したときにどうするかを、自分で作った画面の例 (読み込み中の表示、もう一度試すボタンなど) で話せるか