マンガでわかるJavaScriptのPromise

第14話「Promiseのstaticメソッド 2」

今回は「Promise」の「static」メソッドについての説明、その2です。

コード共通

 このページの以降のコードで使う共通コードです。

ソースコード)コード共通

const timer = (time, type) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (type === 'resolve') {
                resolve(`${time} 解決`);
            }
            if (type === 'reject') {
                reject(`${time} 拒否`);
            }
        }, time);
    });
};

    

コード1 - all 解決

 「Promise.all」の解決の例です。

ソースコード)「Promise.all」解決の例

Promise.all([
    500,
    timer(600, 'resolve'),
    timer(700, 'resolve'),
    timer(800, 'resolve')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

○ [500, '600 解決', '700 解決', '800 解決']

    

コード2 - all 拒否

 「Promise.all」の拒否の例です。

ソースコード)「Promise.all」拒否の例

Promise.all([
    500,
    timer(600, 'resolve'),
    timer(700, 'reject'),
    timer(800, 'reject')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

× 700 拒否

    

コード3 - allSettled

 「Promise.allSettled」の例です。

ソースコード)「Promise.allSettled」の例

Promise.allSettled([
    500,
    timer(600, 'resolve'),
    timer(700, 'reject'),
    timer(800, 'reject')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

○ [
  {"status": "fulfilled", "value": 500},
  {"status": "fulfilled", "value": "600 解決"},
  {"status": "rejected", "reason": "700 拒否"},
  {"status": "rejected", "reason": "800 拒否"}
]

    

コード4 - any 解決

 「Promise.any」の解決の例です。最初に解決するのは、何も待たない「800」になります。

ソースコード)「Promise.any」最初の解決の例

Promise.any([
    timer(500, 'reject'),
    timer(600, 'resolve'),
    timer(700, 'resolve'),
    800
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

○ 800

    

コード5 - any 拒否

 「Promise.any」の拒否の例です。全て拒否の場合です。

ソースコード)「Promise.any」全て拒否の例

Promise.any([
    timer(500, 'reject'),
    timer(600, 'reject'),
    timer(700, 'reject'),
    timer(800, 'reject')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

× AggregateError: All promises were rejected

    

コード6 - race 解決

 「Promise.race」の解決の例です。

ソースコード)「Promise.race」の解決の例

Promise.race([
    timer(500, 'resolve'),
    timer(600, 'reject')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

○ 500 解決

    

コード7 - race 拒否

 「Promise.race」の拒否の例です。

ソースコード)「Promise.race」拒否の例

Promise.race([
    timer(600, 'resolve'),
    timer(500, 'reject')
])
.then(
    val => console.log('○', val),
    val => console.log('×', val)
);

    

出力)実行結果

× 500 拒否

    
種類無料版有料版
頒布先 Amazon Booth
形態Kindle電書PDF+コード
価格0円500円
目的知識普及
安価に閲覧
作者応援
自由な環境で閲覧
DRMありなし
マンガ
コラム
実行可能な
コード
×
作成:2022/07/27  更新:2022/07/27  [Permalink]