複数の処理を同時に実行する処理は、複雑な記述になりがちです。
まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えないとなりません。
そのときに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が3つ }).catch(error => { //エラー処理をキャッチ v_err.innerHTML = error.message; });
実行結果
次に3つ目のPromiseのp3でエラーをわざと発生させた場合
エラーをキャッチして表示を出し分けます。
このallのメソッドは、どれかのpromiseでエラーを発生しても、全て実行することがわかります。