マンガでわかるJavaScriptのPromise

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

第13話「Promiseのstaticメソッド」4　ドキュメント

ドキュメント

コード共通

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

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

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」を使うとよいです。

コンテンツ紹介

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