JavaScriptの非同期処理について

はじめに

個人開発メモ📝
なんとなく知っているけどしっかり理解できていなかったので、備忘録として残します。

非同期処理が誕生した簡単な歴史

例えば、あるショッピングサイトを閲覧する際にそのサイトを表示するには、
▪️商品データや諸々必要データをバックエンドに取りに行く
　↓
▪️ビューに反映させる
こんな流れだが、「商品データや諸々必要データをバックエンドに取りに行く」この処理を待っている間、ビューは反映されない。
つまりその間ユーザーを待たせてしまう＝　表示速度が遅く、ユーザーが離れる　といった課題が生まれた。
その課題を解決すべく、考案されたのが、「先にビューだけ反映させて、商品データが取得できたら表示しているビューに当てはめる」といった非同期処理の挙動である。

参考サイト⇨https://www.youtube.com/watch?v=kbKIENQKuxQ

非同期処理の様々な課題

上記の非同期処理を実施するため、コールバック関数を使用して毎秒毎に表示させる処理を発明したが、

このように、ネストが深くなり読みづらくなってしまった。

この課題の対策として次に誕生したのが、「Promise」である。

.thenで繋げることにより、上記のネストの状態よりは分かりやすくなるが、読みにくさは残ってしまう...

読みにくさを解決し、シンプルにしたものが、「async/await」である。

const handleInputSubmit = async (event) => {
    event.preventDefault();
    // csrfトークン取得
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    // responseに、バックエンドからのレスポンスが代入される
    const response = await postFormData({
      csrfToken,
      data: scheduleFormData,
    });
    if (response != null) {
      console.log('渡ってきたデータ：', response);
      await passToResponseData(response);
    } else {
      console.log('データがありません');
    }
  };

handleInputSubmit()を裏側で動かし、postFormDataが実行され結果が代入されたら、if文の処理にうつる。awaitを書かないと、postFormDataの処理を待たずに次のif文の判定が行われるため「データがありません」と返ってきてしまう。

参考サイト⇨ https://www.youtube.com/watch?v=Vhnz1V-v1cU

ざっと書きましたが、都度更新していきます。