非同期処理
外部に処理を投げている間結果が帰ってくるまで暇をしている同期処理と違って、暇を効率的に使うことができる秀才な処理。
コールバック
指定した処理が完了した後、実行してほしい関数を引数に入れることで実現する処理。
Promise
非同期処理の状態を4段階(pending,fulfilled,rejected,settled)で表してくれる律儀なオブジェクト。
resolveやrejectを使って、成功、失敗時の振る舞いを教えることができる(設定できる)。
4つの状態
- pending : 実行中...。
- fulfilled : 成功。
- rejected : 失敗。
- settled : 処理完了。
resolveとreject
- resolve : 引数は空でも可、空の時はpromiseが入る、処理結果を引数にこいつを実行するとfulfilledになるらしい。
- reject : 基本的にはerrインスタンスが入るらしい、エラーを引数にこいつを実行するとrejectedになるらしい。
promiseはオブジェクトであるため、簡易的にresolve、reject関数を呼び出すこともできる。
非同期処理のハンドリング
then(onFulfilled,onRejected)
promiseの状態がfulfilled(解決)又はrejected(拒否)の時実行するコールバックを設定するメソッド、第二引数(onRejected)は省略できる。
catch()
thenの第二引数を省略することで使うことが可能、onFulfilledの中エラーも拾うことができるのでエラーハンドリングを一箇所に集約できるらしい(正直意味があまりわからん)
finally()
promiseの状態がsettledになると実行されるコールバック。
ジェネレータ関数
処理を途中で中断、実行できるasync/awaitの基になった関数。
function * generatorfunc{
console.log("検問1")
yield1
console.log("検問2")
yield2
console.log("検問3")
yield3
}
const gene1 = generatorfunc()
gene1.next()
functionの後に * 関数内にyieldキーワードを記述するのが特徴。
ジェネレータオブジェクトのnext関数を使うことで、 次のyieldまでの処理を実行する。
async/await
視覚的に同期処理のように見える非同期処理。
基本的にジェネレータ関数と挙動は同じ。
async function asyncFunc(input) {
try{
const result1 = await ayncFunc1(input)
const result2 = await ayncFunc2(result1)
const result3 = await ayncFunc3(result2)
const result4 = await ayncFunc4(result3)
}
}
ジェネレータ関数との違い
- functionの後の * が functionの前についているasyncに置き換わっている。
- yieldがawaitに置き換わっています。
awaitの後ろにpromiseインスタンスを渡すと、関数内の処理が一時停止、解決に伴って再開し解決された値がawaitによって返されます、つまりawaitはバトン(結果)が渡されるまで走らないサボり = 同期処理のように実行されるということ。