JavaScript Promise
https://scrapbox.io/files/6899de853a866f670f63454d.png
基本的に同期処理
API通信など処理に時間を要するものを非同期処理
同期処理にすると通信待ちなども完全に処理がフリーズする
そのために非同期+実行順序づけを行う
JavaScriptの非同期処理は「ノンブロッキング」
await はその関数(=async関数)内の処理を一時停止させますが、ブラウザ全体やUIスレッドが止まるわけではありません。
つまり、通信やJSONのパースに時間がかかっていても、他のボタンをクリックしたり、スクロールしたりすることはできます。
コールバック関数とは
## ローカル挙動確認
非同期処理を同期的に実行するサンプル
## 壁打ち
## 参考
同期処理のいろいろサンプル
同期処理を解説
async/await
async をつけた関数は「必ず Promise を返す関数」になる
async/await で待つには Promise が必須
https://scrapbox.io/files/68a46524a74f1a1b5e2a5f15.png
## まとめ
asyncをつけた関数は必ずPromiseを返す関数にラッピングされる
非同期処理を同期処理として扱う場合はPromiseの利用は必須
resolvedで成功、rejectで失敗を返して処理を進める
awaitは非同期処理を待つ。つまりPromiseが成功/失敗をトリガーに値をゲットする
thenでかく場合の簡略
await を使う関数は 必ず async 関数である必要がある。
--
. 役割の違い
async
→ 関数の戻り値を 必ず Promise に変換する(暗黙に Promise.resolve(...) を返す)。
await
→ Promise が解決するまで「待って」、中身の値を取り出す。
つまり:
async = Promise を返す工場
await は「自分の関数の中だけ一時停止して待つ」ストップウォッチのようなもの
外の世界(他の関数やイベント)は普通に動き続ける
https://scrapbox.io/files/68d7760bb3c129bfedb3a725.png