マンガでわかるJavaScriptのPromise

第13話「Promiseのstaticメソッド」

今回は「Promise」の「static」メソッドについて説明します。

コード共通

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

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

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

    

コード1

 「Promise.all」を使って、全ての処理の終了を待つ例です。実行結果を配列で受け取ります。

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

const array = [
    timer(500, 'resolve'),
    timer(600, 'resolve'),
    timer(700, 'resolve'),
    timer(800, 'resolve')
];

Promise.all(array)
.then(function(res) {
    console.log(res);
});

    

出力)実行結果

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

    

コード2

 「Promise」オブジェクト以外を混ぜた「Promise.all」の例です。

ソースコード)「Promise」以外を混ぜた「Promise.all」の例

const array = [
    500,
    600,
    700,
    timer(800, 'resolve')
];

Promise.all(array)
.then(function(res) {
    console.log(res);
});

    

出力)実行結果

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

    

コード3

 「resolve」と「reject」を混ぜた「Promise.all」の例です。

ソースコード)「resolve」と「reject」を混ぜた「Promise.all」の例

const array = [
    timer(500, 'resolve'),
    timer(600, 'reject'),
    timer(700, 'resolve'),
    timer(800, 'reject')
];

Promise.all(array)
.then(
    function(res) {
    },
    function(res) {
        console.log(res);
    }
);

    

出力)実行結果

600 拒否

    

コード4

 「async/await」を使った「Promise.all」の例です。

ソースコード)「async/await」を使った「Promise.all」の例

(async function() {
    const array = [
        timer(500, 'resolve'),
        timer(600, 'resolve'),
        timer(700, 'resolve')
    ];
    const res = await Promise.all(array);
    console.log('res:', res);
})();

    

出力)実行結果

res: ['500 解決', '600 解決', '700 解決']

    

コード5

 「async/await」を使った「Promise.all」の例です。「resolve」と「reject」を混ぜています。

ソースコード)「async/await」を使った「Promise.all」の例2

(async function() {
    const array = [
        timer(500, 'resolve'),
        timer(600, 'reject'),
        timer(700, 'resolve')
    ];

    try {
        const res = await Promise.all(array);
        console.log('res:', res);
    } catch(error) {
        console.log('error:', error);
    }
})();

    

出力)実行結果

error: 600 拒否

    

コラム:配列の処理 2

 このコラムは、ある程度「Promise」に慣れてから読むとよいです。また、配列の反復メソッドが使える中級者以上を対象にしています。

 さて、以前「配列の処理 1」として、配列の各要素に対して、「Promise」を利用した処理を「await」で待機しながら実行しました。

 今回はこれらの処理を並列的におこないます。

 まず前回と同じように、以下のような「Promise」オブジェクトを返す共通コードと、値の配列を用意します。

ソースコード)共通コードと値の配列

const timerC = time => new Promise(resolve => {
    setTimeout(() => {
        console.log(`exec: ${time}`);
        resolve(`resolve: ${time}`);
    }, time);
});

const arr = [700, 600, 500];

    

 続いて、この「timerC」を利用して、「Promise」の処理を並列的におこないます。

ソースコード)「Promise」の処理を並列的におこなう

(async function() {
    const forAll = arr.map(x => timerC(x));  // Promiseオブジェクトの配列を作る
    const res = await Promise.all(forAll);
    console.log('end all', res);
})();

    

出力)実行結果

exec: 500
exec: 600
exec: 700
end all ['resolve: 700', 'resolve: 600', 'resolve: 500']

    

 以前の「配列の処理 1」では、配列の順番通りに「exec: 700」「exec: 600」「exec: 500」と順番に出力されました。今回は並列的に処理をしているので、早く終わった順に出力されています。そして最後に「end all」が出力されます。

 通信やファイル読み込みなど、並列的におこない処理時間を稼ぎたい場合は、このように「Promise.all」を使うとよいです。

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

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