技術のメモ箱

JavaScript/非同期処理

Promise

Promiseは非同期処理を扱うためのオブジェクト。
MDN: プロミスの使用

Promiseのコンストラクタの引数に非同期処理が書かれたコールバック関数(下記ではasyncFunc)を渡す。
また、非同期処理の成功時や失敗時に実行する関数、完了後に必ず実行する関数を設定できる。

const prom = new Promise(asyncFunc)
    .then(successCallback, failureCallback)
    .finally(finalCallback);

コールバック関数(asyncFunc)自体は同期処理で、インスタンス生成時に実行されることに注意。
引数には非同期処理が成功した時、失敗した時に実行する関数が渡される。

function asyncFunc(resolve, reject) {
    setTimeout( () => {  // 非同期処理
        if (isSuccess) {
            resolve();
        } else {
            reject();
        }
    }, 1000);
}

直列処理

前の非同期処理が成功したときに、その結果をもとに次の非同期処理を始めるには
thenメソッドのコールバック関数の戻り値に次のPromiseインスタンスを設定する。
ちなみにcatch(failureCallback)はthen(null, failureCallback)の省略形である。

prom1.then( result1 => createProm2(result1) )
     .then( result2 => createProm3(result2) )
     .catch(failureCallback);

並列処理

非同期処理を同時に実行するための4つのメソッドがある。
Promise.allは、すべての非同期処理がfulfilledになったとき、thenを実行する。
どれか1つがrejectになった場合、catchを実行する。

Promise.all( [func1(), func2(), func3()] )
    .then( ([result1, result2, result3]) => { ... })
    .catch(failureCallback);

Promise.raceは、非同期処理のどれか1つがsettledになったとき、後続処理を行う。

Promise.race( [func1(), func2(), func3()] )
    .then( firstResult => {
        ...
    });

Promice.anyは、非同期処理のどれか1つがfulfilledになったとき、後続処理を行う。

Promise.any()

Promise.allSettledは、すべての非同期処理がsettledになったとき、thenを実行する。
catchを使わない。

Promise.allSettled()
pagetop