Promiseの利点を手っ取り早く説明する

Promiseの細かい説明は以下のドキュメントに譲ります。 azu.github.io

この記事では、Promiseを使うとどのような嬉しいことがあるのかを簡単に説明します。

setTimeoutを使って、1秒ごとに「1」「2」「3」「4」と表示するプログラムを書く場合を考えます。
Promiseを使わずに従来の方法で書いた場合、以下のようにコールバックのネストの形になります。

setTimeout(function() {
    console.log("1.");
    setTimeout(function() {
        console.log("2.");
        setTimeout(function() {
            console.log("3.");
            setTimeout(function() {
                console.log("4.");
            }, 1000);
        }, 1000);
    }, 1000)
}, 1000);

コールバックのネストはとても読みづらいです。

同じ処理をするプログラムをPromiseを使って書くと、以下のようにthenメソッドのメソッドチェーンの形になります。

var promise = new Promise(function(resolver) {
    setTimeout(function() {
        console.log("1.");
        resolver();
    }, 1000);
});
promise
.then(function() {
    return new Promise(function(resolver) {
        setTimeout(function() {
            console.log("2.");
            resolver();
        }, 1000)
    });
})
.then(function() {
    return new Promise(function(resolver) {
        setTimeout(function() {
            console.log("3.");
            resolver();
        }, 1000);
    });
})
.then(function() {
    return new Promise(function(resolver) {
        setTimeout(function() {
            console.log("4.");
            resolver();
        }, 1000);
    });
});

少々冗長になってしまいましたが、コールバックのネストよりは分かりやすいですね。
非同期処理の流れが逐次実行処理のプログラムのように、上から流れるように処理を追うことができるようになっています。

さらにPromiseでは、各処理で値を引き回したり、catchメソッドで例外をキャッチできたりします。
それについては冒頭のページを参照してもらうとどのようになっているか分かります。

まとめ

Promiseを使うと、非同期処理の一連の流れをメソッドチェーンの形で書けるようになります。
そうすると、逐次処理のプログラムと同じように上から下に処理を追うことができるようになります。
これは、ネストされたコールバックのプログラムより読みやすい形になります。