あくまでイメージです
コールスタック
同期処理タスクの待ち行列
スタックキュー
非同期処理の待ち行列。ここにいるタスクはコールスタックが空になればタスクキューからコールスタックに戻ってくる。
setTimeout
setTimeout(cb, 時間）で表す。中の処理は実行時にスタックキューに送られ、時間後にコールスタックに戻ってくる。
promise()
- new promise((resolve,reject) =>{});
- 中の処理が完了しているならresolve,完了しないならreject状態になる。
また、resolve(),reject()の関数で状態を変更できる。 - resolve状態ならthenメソッドに、reject状態ならcatchメソッドに進む。
- catchが実行されたらpromiseはresolve状態となる
- thenメソッドcatchメソッドにはresolve(),reject()の関数の引数が渡される。
- thenをチェーンしたい場合。(promise.then().then())⇒thenの中でpromiseをリターンする必要がある。
promise.all
- いくつかのpromiseからなる配列を引数としたメソッド。引数となるpromiseたちがいずれもresolve状態ならresolve状態になる
promise.race
- いくつかのpromiseからなる配列を引数としたメソッド。引数となるpromiseたちのいずれかがresolve状態ならresolve状態になる
async
async 関数
- promiseを生成する関数となる。
- またその関数のreturnの値を引数としてresolveする。
- rejectにしたいときはthrow new Errorの値を引数としてrejectとする。
await
- その関数内のあるプロミスの処理が終わるまでその後の処理を始めない。
- awitはasinc関数の中でしか使えない。
- X = awaitプロミス名 ならxへの代入、それ以降の処理はプロミスの結果が返ってくるまで行われない。
await時のエラー処理
awaitでエラーが出た場合はそれ以降の処理は実行できないので.catch()は使えない。
try{}catch(e){}を使う。
ここまでの勉強の意味
非同期処理
- 遅い処理でユーザーを待たせたくなかった
- ただし順序制御が難しかった
コールバック関数
- 非同期タスクの順序を制御することができる
- 関数A(タスクA；関数B(タスクB))となっているとき、
タスクAが実行されてから関数B(タスクB)に移るという順序が制御できた。
コールバック関数の注意
メソッドや関数の引数として渡されるコールバック関数には();をつけない。関数の定義を入れる。
api
公開されている便利サービス
fetch
- サーバーとの非同期通信を行うためのメソッド。apiを使えるようになる。
- プロミス形式,戻り値はレスポンス
fetch("https://example.com/api/endpoint") .then(response => { // レスポンスを処理するコード }) .catch(error => { // エラー処理 });
という形式で記述。
レスポンスはjson形式で帰ってくることが多い。
async/awaitを使ったfetch()
async 関数{
try{response = await fetch()
//何らかの処理}
catch(error){} }
fetchData();
async:プロミスを関数で作成できる.※プロミス自体は非同期処理ではない。
await:直後のプロミスがresolveされるまでasync関数内の処理が止まる。なおreject時はcatchへ
- 非同期処理の戻り値を変数に代入したいとき便利。
- 通常は非同期処理の終了を代入が待ってくれない。
- await抜きで変数＝promise(非同期処理)としてもpromiseが処理中であるという情報が代入されるだけ