Ext.Deferredで非同期処理をまとめる

ExtJSでもDeferred, Promiseによる非同期処理をまとめる機能が存在します。

複数のロードが必要な場合にコールバック地獄とならないようにする、最近ではお馴染みの手法ですね。

ロード終了まで画面をマスクしたり、ロードのタイミングを調整したりするのに重宝します。

ExtJSでは特に複数データのロードが必要になるので、使う場面が多いです。

サンプル

ExtJSでは、Ext.Deferredクラスを使います。

必要なExt.Deferredのインスタンスを用意して、Ext.Deferred.allメソッドに渡し、thenメソッドに完了時の処理を記述します。

あとは各処理が終わったタイミングで、Ext.Deferredのインスタンスのresolveメソッドまたはrejectメソッドを呼び出します。

thenの第1引数が全てresolveとなった場合に呼び出されます。1つでもrejectとなった場合は第2引数の処理が呼び出されます。

testDeferred: function () {
    var d1 = Ext.create('Ext.Deferred'),
        d2 = Ext.create('Ext.Deferred');

    Ext.Deferred.all([d1, d2])
        .then(
            function () {
                console.log('all resolve');
            },
            function () {
                console.log('any reject');
            }
        );

    setTimeout(function () {
        console.log('d1 resolve');
        d1.resolve();
    }, 3000);

    setTimeout(function () {
        console.log('d2 resolve');
        d2.resolve();
    }, 1000);
}

上記の場合、実行結果は下記のようになります。

d2 resolve
d1 resolve
all resolve

ちなみに一部rejectの場合はどうなるでしょうか？

testDeferred: function () {
    var d1 = Ext.create('Ext.Deferred'),
        d2 = Ext.create('Ext.Deferred');

    Ext.Deferred.all([d1, d2])
        .then(
            function () {
                console.log('all resolve');
            },
            function () {
                console.log('any reject');
            }
        );

    setTimeout(function () {
        console.log('d1 resolve');
        d1.resolve();
    }, 3000);

    setTimeout(function () {
        console.log('d2 reject');
        d2.reject();
    }, 1000);
}

d2 reject
any reject
d1 resolve

1つでもrejectとなった場合、thenメソッドの第2引数の処理が呼ばれているのが分かります。

残りの処理が終わるのを待たずに呼び出されることに注意が必要です。