https://twitter.com/Keisuke69/status/1540890199265509386 のツイートをきっかけに https://www.amazon.co.jp/dp/B09XQ89M9Y を読んでみたらすごくわかりやすかったので基本的なところをざっくりまとめる

これ無料で読めるのはすごいと思う

非同期処理とは

特定の処理が終わった後に行う処理を登録して、別の処理に進む

処理1→処理2→処理3の流れで実行するとき、処理2がメール送信処理、処理3がUI関連の処理だとする

処理2が終わるまで待っているとすると、その間、画面は固まったままになってしまう

なので処理2は裏で実行し、処理3に進む

この仕組みが非同期処理と呼ばれる

コールバック関数

特定の処理が終わった後に行う処理を登録する関数のことをコールバック関数と呼ぶ

Promise

xxが終わったら○○する、○○が終わったら△△するといったように処理を入れ子にしていくとどんどん階層が深くなっていき処理が追いづらくなる

そのネストを解消する仕組みがPromise

非同期処理を入れ子にせずに縦に同じ階層で書ける

// thenはPromiseオブジェクトを返すのでメソッドチェーンできる
// thenの中でPromiseをreturnしない場合は次のthenで登録した関数がすぐに実行される
Promiseオブジェクト
  .then(
    // 処理
    resolve()
  )
  .then(
    // 処理
    resolve()
  ).then(
    //処理
    resolve()
  )

resolve() は処理が終わったら実行され、終わったら次のthenに登録した関数が実行される

resolve() は引数を渡せる。resolveに渡した引数をthenでそのまま受け取ることができる

asyncとawait

asyncとawaitを使えばPromiseで書いていた処理がもっとシンプルに書ける

const func = async function() {
  await xxx();
  await yyy();
  await zzz();
};
func();