JQuery.DeferredとES2015のPromiseオブジェクトの違いってなんなのさってなったら
よくわっからーん。
下記二つ読んでも、同じように実装できるからDeferredの必要性がわからない。
- 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
- 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までのp.413-418
下記なんかを読むと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); } );
追記
- Promiseの実装は色々ある