ポジローぽけっと

昨日より今日、今日より明日を信じて、トライトライ

JQuery.DeferredとES2015のPromiseオブジェクトの違いってなんなのさってなったら

よくわっからーん。
下記二つ読んでも、同じように実装できるからDeferredの必要性がわからない。

下記なんかを読むとPromiseで十分なのかなと思う。

方針

  • ブラウザの対応状況に左右されるならJQuery.Defferedを使う
  • node.jsで使うなら、require(“jquery”)はしたくないからPromiseを使う

テスト

sleepで比較

Deferred

function sleepDeferred(ms) {
    "use strict";
    var kind = "Deferred";
    var d = new $.Deferred();
    if (ms > 2000) {
        setTimeout(function () {
            // statements
            console.log("%s:resolve", kind);
            d.resolve(kind);
        }, ms);
    } else {
        setTimeout(function () {
            console.log("%s:reject", kind);
            d.reject(kind);
        }, ms);
    }
    return d.promise();
}

Promise

function sleepPromise(ms) {
    "use strict";
    var kind = "Promise";
    var p = new Promise(function (resolve, reject) {
        if (ms > 2000) {
            setTimeout(function () {
                // statements
                console.log("%s:resolve", kind);
                resolve(kind);
            }, ms);
        } else {
            setTimeout(function () {
                console.log("%s:reject", kind);
                reject(kind);
            }, ms);
        }
    });
    return p;
}

chainで比較

Deferred

sleepDeferred(6000).done(
    function (kind) {
        "use strict";
        console.log("%s:done", kind);
    }
).fail(
    function (kind) {
        "use strict";
        console.log("%s:fail", kind);
    }
);

Promise

sleepPromise(2000).then(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).catch(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

並列実行で比較

Deferred

$.when(
    sleepDeferred(1000),
    sleepDeferred(3000)
).done(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).fail(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

Promise

Promise.all([// Promise.raceもあるよ!
    sleepPromise(1000),
    sleepPromise(3000)
]).then(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).catch(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

追記