promiseの使い方

promiseとは？

非同期処理の処理結果を示すためのデータ型（オブジェクト型）。
とりうる値（状態）は、3つのみ。

• pending : 保留中の意。初期状態（まだ処理結果の判定が行われていない状態）。
• fulfilled : 成功の意。resolve()が呼び出されることで、処理が正常に完了したとみなされる状態。
• rejected : 失敗の意。reject()が呼び出される、または例外がスローされることで、処理が異常終了したとみなされる状態。

基本構文

//非同期処理関数fetch
function fetch() {
    return new Promise((resolve, reject) => {
        //非同期処理（最終的に resolve() もしくは reject() を呼ぶ必要がある）
        //try~catchで、tryブロック末尾にresolve()を、catchブロック内にreject()を書くのが安牌。
    });
}

fetch()
    .then((result) => {
        //非同期処理関数fetchの結果がresolveだった時に実行したい処理
    })
    .catch(err => {
        //非同期処理関数fetchの結果がrejectだった時に実行したい処理
    })
    .finally(() => {
        //非同期処理関数fetchの結果がresolveであってもrejectであっても、常に実行したい処理
    });

応用構文

.all：複数のPromiseの並列実行

Promise.all([fetch1(), fetch2()])
    .then(results => {
        //指定した全ての非同期処理関数（ここではfetch1とfetch2）がresolveの場合、実行したい処理
        //それぞれのresolve値が配列化されて渡される
    })
    .catch(err => {
        //指定した非同期処理関数のうちいずれか一つでもrejectの場合、実行したい処理
        //rejectした関数以外の結果は、無視される
    });

.race：最初に処理完了した結果のみを採用

Promise.race([fetch3(), fetch4()])
    .then(result => {
        //指定した非同期処理関数のうち、最初に値を返したものがresolveだった場合に実行したい処理
        //他関数の結果は、無視される
    })
    .catch(err => {
        //指定した非同期処理関数のうち、最初に値を返したものがrejectだった場合に実行したい処理
        //他関数の結果は、無視される
    });

.allSettled：すべての結果を採用

Promise.allSettled([fetch5(), fetch6()])
    .then(results => {
        results.forEach(r => {
            if(r.status === "fulfilled") {
                //現在参照している非同期処理関数の結果がresolveだった場合に実行したい処理
            } else {
                //現在参照している非同期処理関数の結果がrejectだった場合に実行したい処理
            }
        });
    });

.any：最初にresolveしたものの結果のみを採用

Promise.any([fetch7(), fetch8()])
    .then(result => {
        //最初にresolveを返したものを採用して実行したい処理
    })
    .catch(() => {
        //指定した非同期処理関数がすべてrejectだった場合に実行したい処理
    });