Promiseを複数組み合わせる時の基本パターン（直列、並列、分岐）

ES6形式のPromiseを使うときに頻出する3つのパターン。直列パターン、並列パターン、分岐パターンを説明します。

最近、Promise周りが盛り上がっていて、reduceを使ったほうが良いとか、ライブラリがどうとか・・・いう話を聞くのですが、そもそも「ベタに書いたときにどうするのが基本なのか」という情報が見つからないので書いてみました。

直列パターン

一番良く使うのは、複数の処理を直列につなげるパターンでしょう。#1が終わってから、#2、#2が終わってから#3というパターンです。

Promise.resolve()
    .then(function(){
        return new Promise(function(fulfilled, rejected){
            asyncFunc(function(){
                fulfilled();
            });
        })
    })
    .then(function(){
        return new Promise(function(fulfilled, rejected){
            asyncFunc(function(){
                fulfilled();
            });
        })
    })

本来、最初のPromise.resolve()は不要で、new Promiseで始めた方がコードは短くなります。しかし、自分はわざわざコーディングルールとして、Promise.resolve()で始めて、.thenで受けるようにしています。なぜでしょうか？それは、コードのパターンを統一するためです。#1, #2, #3と3つの処理が意味的には対等であるにも関わらず、#1だけ書き方が違うと、コードも見づらいし、処理の順番を変更したとき（あるいは、後述するように分岐や並列化を入れる場合）直感的ではないコード修正が必要になります。このため、上のように最初にダミーのPromise.resolve()を入れるようにしています。

並列パターン

ここに並列処理（Promise.all)を組みわせる場合、以下のようになります。#1と#2を並列に処理し、両方が終わったら#3を行うというパターンです。

Promise.resolve()
    .then(function(){
        return Promise.all([
            new Promise(function(fulfilled, rejected){
                asyncFunc(function(){
                    fulfilled();
                });
            }),
            new Promise(function(fulfilled, rejected){
                asyncFunc(function(){
                    fulfilled();
                });
            })
        ])
    })
    .then(function(){
        return new Promise(function(fulfilled, rejected){
            asyncFunc(function(){
                fulfilled();
            });
        })
    });

並列パターン（map使用）

ただし、上のように複数のPromiseをそのまま書くことはあまり多くなく、以下のようにmapを使ってPromiseを生成することが多いです。

Promise.resolve()
    .then(function(){
        return Promise.all(list.map(function(item){
            return new Promise(function(fulfilled, rejected){
                asyncFunc(function(){
                    fulfilled();
                });
            }),
        }))
    })
    .then(function(){
        return new Promise(function(fulfilled, rejected){
            asyncFunc(function(){
                fulfilled();
            });
        })
    });

分岐パターン

直列パターンで、条件によって処理内容を変えたり、処理をスキップしたいというときに使います。

Promise.resolve()
    .then(function(){
        if(condition1){
            // 条件1 単独のPromise
            return new Promise(function(fulfilled, rejected){
                asyncFunc(function(){
                    fulfilled();
                });
            })
        }else if(condition2){
            // 条件2 Promise2つを直列化
            return Promise.resolve()
                .then(function(){
                    return new Promise(function(fulfilled, rejected){
                        asyncFunc(function(){
                            fulfilled();
                        });
                    })
                })
                .then(function(){
                    return new Promise(function(fulfilled, rejected){
                        asyncFunc(function(){
                            fulfilled();
                        });
                    })
                })
        }else{
            // 条件3 何もしない
        }
    })
    .then(function(){
        return new Promise(function(fulfilled, rejected){
            asyncFunc(function(){
                fulfilled();
            });
        })
    });

ポイントは、.thenの中で、分岐しているということです。もちろん、同じことは、new Promiseの中で分岐させてもできます。ただ、new Promise(fulfilled, rejected){}という塊は、できる限りシンプルな非同期処理の単位であるべきなので、フロー制御は外側に追い出すのが良いと思います。Promiseを返すモジュールを利用する場合も、.thenの中で分岐する習慣にしておくと、コードが綺麗になります。

まとめ

個人的には必ずしも上記のようなパターンを直接使っているわけではなく、モジュール化してもうちょっと便利に使っていたりするのですが、とりあえず直列、並列、分岐という基本パターンは覚えておくべきではないかと思います。