マンガでわかる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」を使うとよいです。

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