マンガでわかる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 拒否

    
作成:2022/07/27  更新:2022/07/27  [Permalink]

クロクロ・ショップ
特殊な技術書多数あります
レトロ風RPG フルスクラッチ開発 全コード
レトロゲーム風RPGの全コードを掲載して解説した本
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
『テトリス』や『ぷよぷよ』に類似した落ち物パズルゲームの全コードを掲載して解説した本
JavaScriptでリバーシゲームをつくろう
ライブラリを使わずに全コードを書いて、リバーシゲームを作るまでを徹底解説
ワールドマップ自動生成読本
二次元ゲームのワールドマップを自動生成するための本
レトロゲームファクトリー
過去のゲームを最新機に移植する会社のお仕事小説(新潮社)
顔貌売人 ハッカー探偵 鹿敷堂桂馬
プログラマーが探偵役のエンタメ・ミステリー第2弾 最先端の情報犯罪に安藤と鹿敷堂が挑みます(文藝春秋)
裏切りのプログラム ハッカー探偵 鹿敷堂桂馬
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美と共に、IT業界で起きた事件に挑む。2016年の松本清張賞の最終候補作(文藝春秋)
×