女性向けエンジニアスクール
3秒でわかる
処理の完了を待たずに次へ進み、終わった時点で結果を受け取る進め方。通信やファイル読み込みで画面や処理を止めないために使います。
もう少し詳しく
どういうものか
非同期処理とは、時間のかかる処理の完了を待たずに次の行へ進み、終わったタイミングで結果を受け取る進め方です。対になるのが同期処理で、こちらは終わるまでその場で止まります。ネットワーク通信、ファイルの読み書き、タイマー、データベース問い合わせなど、CPU ではなく外部の応答を待つ処理が対象になります。
なぜ必要か
ブラウザの JavaScript は基本的に 1 本のスレッドで動きます。API の応答を同期的に待つと、その 1 秒の間はクリックもスクロールも受け付けず、画面が固まったように見えます。サーバー側でも同じで、1 件の DB 問い合わせを待つ間にスレッドを占有すると、同時に捌ける件数がそのまま落ちます。待っている間に別の仕事をさせるための仕組みが非同期処理です。
具体例
console.log("1");
setTimeout(() => console.log("3"), 0);
Promise.resolve().then(() => console.log("2.5"));
console.log("2");
// 出力は 1, 2, 2.5, 3
async function load() {
const [user, posts] = await Promise.all([
fetch("/api/user").then((r) => r.json()),
fetch("/api/posts").then((r) => r.json()),
]);
return { user, posts };
}Promise.all を使うと 2 本の通信が同時に走り、直列に await を並べるより速く終わります。
つまずきやすいところ
await を機械的に並べてしまい、独立した通信まで直列になって遅いtry では捕まらない。await するか .catch() を付けるforEach の中の await は待たれない。for...of に置き換える似た用語との違い
| 用語 | 意味 |
|---|---|
| 同期 | 終わるまでその場で待つ |
| 非同期 | 待たずに進み、後で結果を受ける |
| 並行 | 複数の処理を切り替えながら進める |
| 並列 | 複数の処理を物理的に同時に動かす |
覚え方
飲食店で注文してから席で待つのが非同期、厨房の前に立って出来上がるまで動かないのが同期です。待っている間に他の客を案内できるかどうかが差になります。
