Javascript Promises 140822110445 Phpapp01

8/15/2019 Javascript Promises 140822110445 Phpapp01

1/32

JavaScript Promises

Pulak (@pulakb)http://pulakonline.co

m/


2/32

Discussions• Callbacks• JavaScript Promises

– jQuery – ‘q’ library – AngularJs – No e!js


3/32

•

"#at is a Callback $unction%• &o' Callback $unction 'ork%

• ‘Callback #ell’


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


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:!


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


7/32


$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/32


$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


9/32

‘Callback #ell’

• Co e comple-ity

•


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


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%


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


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 +!


14/32


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

•


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!


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


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


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


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


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


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


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


24/32

jQuery


25/32

Q K library


26/32

Q K library


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


28/32

No e an q library


29/32

AngularJS


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!


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


32/32

Q EA

Javascript Promises 140822110445 Phpapp01

Documents

Transcript of Javascript Promises 140822110445 Phpapp01