JavaScript Promise
#JavaScript
https://scrapbox.io/files/6899de853a866f670f63454d.png
基本的に同期処理
API通信など処理に時間を要するものを非同期処理
同期処理にすると通信待ちなども完全に処理がフリーズする
そのために非同期+実行順序づけを行う
JavaScriptの非同期処理は「ノンブロッキング」
await はその関数(=async関数)内の処理を一時停止させますが、ブラウザ全体やUIスレッドが止まるわけではありません。
つまり、通信やJSONのパースに時間がかかっていても、他のボタンをクリックしたり、スクロールしたりすることはできます。
コールバック関数とは
https://qiita.com/nakajima417/items/4d0c2d46ff82351549e6
## ローカル挙動確認
非同期処理を同期的に実行するサンプル
https://github.com/daisukehanamura/StudyJavaAndSpringApp/commit/535e7ada44c61279c4ec51b5da54ae6a780ba4db
## 壁打ち
https://chatgpt.com/s/t_688e0994597881919684692eced29d63
https://chatgpt.com/s/t_688e0a5aa88481919bd70693988a5e45
## 参考
同期処理のいろいろサンプル
https://qiita.com/rawHam/items/838eefc80bc35a90e49a
同期処理を解説
https://qiita.com/Hashimoto-Noriaki/items/e2efea0a3e27745d17d0
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
https://zenn.dev/singularity/articles/360d69fde8322d
async/await
async をつけた関数は「必ず Promise を返す関数」になる
async/await で待つには Promise が必須
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
https://github.com/daisukehanamura/StudyJavaAndSpringApp/blob/main/src/main/resources/static/js/await.js
https://scrapbox.io/files/68a46524a74f1a1b5e2a5f15.png
## まとめ
asyncをつけた関数は必ずPromiseを返す関数にラッピングされる
非同期処理を同期処理として扱う場合はPromiseの利用は必須
resolvedで成功、rejectで失敗を返して処理を進める
awaitは非同期処理を待つ。つまりPromiseが成功/失敗をトリガーに値をゲットする
thenでかく場合の簡略
await を使う関数は 必ず async 関数である必要がある。
--
. 役割の違い
async
→ 関数の戻り値を 必ず Promise に変換する(暗黙に Promise.resolve(...) を返す)。
await
→ Promise が解決するまで「待って」、中身の値を取り出す。
つまり:
async = Promise を返す工場
https://chatgpt.com/share/68a467fb-25a0-8011-81c0-aa3df4dfbcd5
await は「自分の関数の中だけ一時停止して待つ」ストップウォッチのようなもの
外の世界(他の関数やイベント)は普通に動き続ける
https://scrapbox.io/files/68d7760bb3c129bfedb3a725.png
https://engineering.mercari.com/blog/entry/20220128-3a0922eaa4/