マンガでわかるJavaScriptのPromise

Xにポスト X@ruten 開発支援 開発/執筆依頼
公開：2024-11-15、更新：2024-11-15

第14話「Promiseのstaticメソッド 2」3　ドキュメント

ドキュメント

コード共通

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

ソースコード）コード共通

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 拒否

コンテンツ紹介

この連載をまとめて 無料の電子書籍で読む PDF＋コードをDLする
他のマンガも見る（マンガまとめページ）
コンテンツを全て見る
コンテンツを全て見る
Webサイトのトップに移動
トップページに戻る
Cronus Crown（クロノス・クラウン）のトップページに戻る
(c)2002-2024 Cronus Crown　(c)1997-2024 Masakazu Yanai
ご意見・お問い合わせはサイト情報 弊社への連絡までお願いします
個人情報の取り扱い、利用者情報の外部送信について