複数の処理を同時に実行する処理は、複雑な記述になりがちです。
まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えないとなりません。
そのときにPromiseオブジェクトが便利です。
以下は複数の処理を同時に実行する記述で、それをこのページで実行しています。
// promiseを作成する
var p1 = new Promise(function(resolve, reject) {
v1.innerHTML = "p1実行";
resolve();//解決の処理
});
var p2 = new Promise(function(resolve, reject) {
v2.innerHTML = "p2実行";
resolve();
});
var p3 = new Promise(function(resolve, reject) {
v3.innerHTML = "p3実行";
resolve();
//reject(new Error('p3でエラー発生'));//拒否の処理
});
// Promise.allを使って、3つのpromiseを同時に実行している
Promise.all([p1, p2, p3]).then(function(v) {
v_all.innerHTML = "すべての処理の実行完了";
//それぞれのresolve(hoge)で値を渡すとvに配列で返さる
console.log(v); //上記の場合undefinedが３つ
}).catch(error => {
//エラー処理をキャッチ
v_err.innerHTML = error.message;
});
実行結果
次に３つ目のPromiseのp3でエラーをわざと発生させた場合
エラーをキャッチして表示を出し分けます。
このallのメソッドは、どれかのpromiseでエラーを発生しても、全て実行することがわかります。
