View
223
Download
0
Category
Preview:
Citation preview
8/15/2019 Javascript Promises 140822110445 Phpapp01
1/32
JavaScript Promises
Pulak (@pulakb)http://pulakonline.co
m/
8/15/2019 Javascript Promises 140822110445 Phpapp01
2/32
Discussions• Callbacks• JavaScript Promises
– jQuery – ‘q’ library – AngularJs – No e!js
8/15/2019 Javascript Promises 140822110445 Phpapp01
3/32
•
"#at is a Callback $unction%• &o' Callback $unction 'ork%
• ‘Callback #ell’
8/15/2019 Javascript Promises 140822110445 Phpapp01
4/32
"#at is a Callback $unction%
• A callback $unction (say) *+ is a $unction t#at is passe toanot#er $unction (say) ,+ as a parameter) an * getse-ecute insi e ,!
•
JavaScript uses callback $unctions to #an le async#ronouscontrol .o'!
/
01
2( 34 ata5o'3 +!on( 3click3) function (+ 6
alert(‘#ello’+78+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
5/32
&o' Callback $unction 'ork%
$unction 'riteCo e(callback+ 6 99 o somet#ing callback(+7 99:!!
8
$unction intro uce;ugs(+ 6 99:!
8/15/2019 Javascript Promises 140822110445 Phpapp01
6/32
&o' Callback $unction'ork%
$s = require(>$s>+7
$s!rea @ile (>$/!t-t>)>ut$ >)$unction(err) ata+6 i$ (err+ 6 return console!log(err+7
8 console!log( ata+7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
7/32
&o' Callback $unction'ork%
$s = require(>$s>+7
$s!rea @ile(>$/!t-t>)>ut$ >) function (err) ata+6
if (err+ 6 return console!log(err+7 8 console!log( ata+7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
8/32
&o' Callback $unction'ork%
$s = require(>$s>+7
$s!rea @ile(>$/!t-t>)>ut$ >)
function (err) ata+6 if (err+ 6 return console!log(err+7 8
console!log( ata+7 8 +7
Bquivalent
$ormatting
8/15/2019 Javascript Promises 140822110445 Phpapp01
9/32
‘Callback #ell’
• Co e comple-ity
•
8/15/2019 Javascript Promises 140822110445 Phpapp01
10/32
‘Callback #ell’
"#en 'orking 'it# callbacks) nesting o$ $unctions canmake rea ing an un erstan ing t#e co e very i cult
8/15/2019 Javascript Promises 140822110445 Phpapp01
11/32
Promises
• "#at is Promise%
• "#at is De$erre %
• De$erre E Promise
• "#at are t#e use cases o$ Promise%
• "#at oes Promises guarantee%
• "#y promises are a'esome%
8/15/2019 Javascript Promises 140822110445 Phpapp01
12/32
"#at is Promise%
• A promise is an object t#at represents t#e return value or t#et#ro'n e-ception t#at t#e $unction may eventually provi e!
• Fn ot#er 'or s) a promise represents a value t#at is not yet
kno'n! A promise is an asynchronous value !
• #e core i ea be#in promises is t#at a promise representst#e result o$ an async#ronous operation!
•
A Promise #as 1 possible states – Pen ing – @ulGlle – 5ejecte
8/15/2019 Javascript Promises 140822110445 Phpapp01
13/32
De$erre E Promise
• A deferred (object+ represents a 'ork t#at is not yetGnis#e !
• A promise (property+ is a place#ol er $or a result '#ic# is
initially unkno'n!
• Every deferred has a promise hich functions as apro!y for the future result !
• @rom a semantic perspective t#is means t#at instea o$calling a $unction ( callback +) 'e are able to return a value( promise +!
8/15/2019 Javascript Promises 140822110445 Phpapp01
14/32
8/15/2019 Javascript Promises 140822110445 Phpapp01
15/32
"#at are t#e use cases o$ Promise%
• An AJA, request an callbacks(a single request)parallel9c#aine requests+
• An async#ronous loa ing o$ assets an actions to per$orm
• Animation
•
8/15/2019 Javascript Promises 140822110445 Phpapp01
16/32
"#at oes Promise guarantee%
promise@or5esult!t#en(on@ulGlle ) on5ejecte +7
• Inly one o$ on"ul#lled or on$e%ected 'ill be calle !
• on"ul#lled 'ill be calle 'it# a single $ulGllment value (return value+!
• on$e%ected 'ill be calle 'it# a single rejection reason (t#ro'n e-ception+!
• F$ t#e promise is alrea y settle ) t#e #an lers 'ill still be calleonce you attac# t#em!
• #e #an lers 'ill al'ays be calle async#ronously!
8/15/2019 Javascript Promises 140822110445 Phpapp01
17/32
"#at oes Promise guarantee%
• At Grst) a Promise is in a pen ing state! Bventually) it’seit#er resolve or rejecte !
• Ince a Promise is resolve or rejecte ) it’ll remain in t#at
state $orever) an its callbacks 'ill never Gre again
• Promises can be c#aine
8/15/2019 Javascript Promises 140822110445 Phpapp01
18/32
"#y promises are a'esome•
Cleaner met#o signatures
• Hni$orm return9error semantics
• Basy composition
• Basy sequential9parallel join
• Al'ays async
• B-ceptionKstyle error bubbling
8/15/2019 Javascript Promises 140822110445 Phpapp01
19/32
Case /L Simple @unctional rans$orm
var aut#or = getAut#ors(+7 var aut#orName = aut#or!name7
99becomes
var aut#orPromise = getAut#ors(+!t#en( function (aut#or+ 6 return aut#or!name7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
20/32
Case 0L 5eacting 'it# anB-ception
var aut#or = getAut#ors(+7 if (aut#or === null+ thro ne Brror(3null aut#orM3+7
becomes
var aut#orPromise = getAut#ors(+!t#en( function (aut#or+ 6 if (aut#or === null+ thro ne Brror(3null aut#orM3+7 return aut#or7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
21/32
Case 1L &an ling anB-ception
try 6 up ateAut#or( ata+7 8 catch (e-+ 6 console!log(3 #ere 'as an errorL3) e-+7 8
99becomes
var up atePromise = up ateAut#or( ata+!t#en(un eGne )function (e-+ 6 console!log(3 #ere 'as an errorL3) e-+7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
22/32
Case L 5et#ro'ing anB-ception
try 6 up ateAut#or( ata+7 8 catch (e-+ 6
thro ne Brror(3Hp ating aut#or $aile ! DetailsL 3 Oe-!message+7 8
99becomes
var up atePromise = up ateAut#or( ata+!t#en(un eGne )function (e-+ 6 thro ne Brror(3Hp ating aut#or $aile ! DetailsL 3 Oe-!message+7 8+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
23/32
Async CaseL "aiting var name = prompt@orNe'Aut#orName(+7 up ateAut#or(6 nameL name 8+7 re$res#Screen(+7
99becomes
prompt@orNe'Aut#orName(+ !t#en( function (name+ 6 return up ateAut#or(6 nameL name 8+7 8+ !t#en(re$res#Screen+7
8/15/2019 Javascript Promises 140822110445 Phpapp01
24/32
jQuery
8/15/2019 Javascript Promises 140822110445 Phpapp01
25/32
Q K library
8/15/2019 Javascript Promises 140822110445 Phpapp01
26/32
Q K library
8/15/2019 Javascript Promises 140822110445 Phpapp01
27/32
jQuery K q i erences
• #ttpsL99 git#ub!com9krisko'al9q9'iki9ComingK$romKjQuery
%&uery & 'otes
t#en t#enQ>s t#en) an in $act all o$ its met#o s)#ave i erent e-ceptionK#an lingbe#avior) as escribe above!
one t#en t#en oes not support multiple #an lers7use multiple calls to t#en to attac# t#em!
$ail catc#catc# oes not support multiple#an lers7 use multiple calls to catc# toattac# t#em!
e$erre !promise(met#o +
e$erre !promise(property+
*ou must get t#e promise part o$ t#ee$erre 7 t#e e$erre oes not #ave t#e
promise APF!
https://github.com/kriskowal/q/wiki/Coming-from-jQueryhttps://github.com/kriskowal/q/wiki/Coming-from-jQueryhttps://github.com/kriskowal/q/wiki/Coming-from-jQueryhttps://github.com/kriskowal/q/wiki/Coming-from-jQuery
8/15/2019 Javascript Promises 140822110445 Phpapp01
28/32
No e an q library
8/15/2019 Javascript Promises 140822110445 Phpapp01
29/32
AngularJS
8/15/2019 Javascript Promises 140822110445 Phpapp01
30/32
AngularJS – Rimitations o$ Promise in Angular
Fn Angular>s 2Q implementation) F$ you on>t Gre o2scope!2apply(+) a$ter resolving) t#e resolve values 'ill
never propagate to your >t#en> $unctions! Sometimes F'ant to use promises t#at aren>t tie to my Angular2 igest cycle!
8/15/2019 Javascript Promises 140822110445 Phpapp01
31/32
H5RsCre it goes to all t#e people $or s#aring t#eir t#oug#tsL
• #ttpL99'iki!commonjs!org9'iki9Promises9A • #ttpL99promisesaplus!com 9• #ttpL99promisesaplus!com9 i erencesK$romKpromisesKa• #ttpL99api!jquery!com9category9 e$erre Kobject 9• #ttpL99sitr!us90 /09 T91/9promiseKpipelinesKinKjavascript!#tml• #ttpL99stackover.o'!com9questions9/0/U T V9jqueryK e$erre KpromiseK esignKpatternsKan KuseKcases• #ttpL99stackover.o'!com9questions9U /0 19'#atKareKt#eK i erencesKbet'eenK e$erre KpromiseKan K$utureKi
nKjavascript• #ttpL99stackover.o'!com9questions9V 1U10T9jqueryK e$erre sKan KpromisesKt#enKvsK one • #ttpL99blog!me iumequalsmessage!com9promiseK e$erre KobjectsKinKjavascriptKpt/Kt#eoryKan Ksemantics • #ttpsL99gist!git#ub!com9 omenic91 WWT• #ttpL99 omenic!me90 /09/ 9/ 9youreKmissingKt#eKpointKo$Kpromises 9 • #ttpsL99git#ub!com9krisko'al9q• #ttps L99git#ub!com9krisko'al9uncommonjs9blob9master9promises9speciGcation!m • #ttpL99james!pa olsey!com9jquery94 v=0! !1E$n=jQuery!De$erre • #ttpL99'''! 'mkerr!com9promisesKinKangularjsKt#eK eGnitiveKgui e 9 • #ttpL99spion!git#ub!io9posts9'#yKiKamKs'itc#ingKtoKpromises!#tml • #ttpL99blog!ometer!com90 //9 T90 9callbacksKsync#ronousKan Kasync#ronous 9
http://wiki.commonjs.org/wiki/Promises/Ahttp://wiki.commonjs.org/wiki/Promises/Ahttp://promisesaplus.com/http://promisesaplus.com/http://promisesaplus.com/differences-from-promises-ahttp://promisesaplus.com/differences-from-promises-ahttp://api.jquery.com/category/deferred-object/http://api.jquery.com/category/deferred-object/http://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttp://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttps://gist.github.com/domenic/3889970http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/https://github.com/kriskowal/qhttps://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttps://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttp://james.padolsey.com/jquery/http://james.padolsey.com/jquery/http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://james.padolsey.com/jquery/http://james.padolsey.com/jquery/https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttps://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttps://github.com/kriskowal/qhttps://github.com/kriskowal/qhttps://github.com/kriskowal/qhttp://domenic.me/2012/10/14/youre-missing-the-point-of-promises/http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/https://gist.github.com/domenic/3889970https://gist.github.com/domenic/3889970http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttp://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://api.jquery.com/category/deferred-object/http://api.jquery.com/category/deferred-object/http://promisesaplus.com/differences-from-promises-ahttp://promisesaplus.com/differences-from-promises-ahttp://promisesaplus.com/http://promisesaplus.com/http://promisesaplus.com/http://wiki.commonjs.org/wiki/Promises/Ahttp://wiki.commonjs.org/wiki/Promises/Ahttp://wiki.commonjs.org/wiki/Promises/Ahttp://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/http://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://spion.github.io/posts/why-i-am-switching-to-promises.htmlhttp://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/http://james.padolsey.com/jquery/http://james.padolsey.com/jquery/https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttps://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttps://github.com/kriskowal/qhttps://github.com/kriskowal/qhttps://github.com/kriskowal/qhttp://domenic.me/2012/10/14/youre-missing-the-point-of-promises/http://domenic.me/2012/10/14/youre-missing-the-point-of-promises/https://gist.github.com/domenic/3889970https://gist.github.com/domenic/3889970http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttp://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semanticshttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-donehttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascripthttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://stackoverflow.com/questions/12160785/jquery-deferred-promise-design-patterns-and-use-caseshttp://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://sitr.us/2012/07/31/promise-pipelines-in-javascript.htmlhttp://api.jquery.com/category/deferred-object/http://api.jquery.com/category/deferred-object/http://promisesaplus.com/differences-from-promises-ahttp://promisesaplus.com/differences-from-promises-ahttp://promisesaplus.com/http://promisesaplus.com/http://promisesaplus.com/http://wiki.commonjs.org/wiki/Promises/Ahttp://wiki.commonjs.org/wiki/Promises/Ahttp://wiki.commonjs.org/wiki/Promises/A
8/15/2019 Javascript Promises 140822110445 Phpapp01
32/32
Q EA
Recommended