用途
新着
履歴
分類

JS 同時にfunctionを実行

JS 同時にfunctionを実行
Promiseを使って複数の処理を同時に実行するサンプルです。

複数の処理を同時に実行する処理は、複雑な記述になりがちです。

まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えないとなりません。

そのときに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でエラーを発生しても、全て実行することがわかります。

公開 2021-05-31 00:23:25
更新 2021-05-31 00:43:55
このページの二次元コード
JS 同時にfunctionを実行

人気のサンプル

search -  category -  about
© 2024 kipure
Top