Promises. The basics, from Promises/A+

3,544 views
3,357 views

Published on

Covers a few very core ideas about promises in JS:
1. What they are
2. How to use the then() method to access value or rejection reason
3. Promise chaining
4. Passing values through promise chains
5. Promise callbacks returning promises are waited for

Published in: Technology, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,544
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
45
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Promises. The basics, from Promises/A+

  1. 1. Promises Luke Smith SmugMug @ls_n
  2. 2. A promise represents a valuethat may not be available yet var promise = async(); promise
  3. 3. A promise represents a valuethat may not be available yet var promise = async(); promise Synchronous code analogy var value = sync();
  4. 4. new Y.Promise(workFn)function async() { function getMessage(resolve, reject) { setTimeout(function () { resolve(“Promise fulfilled”); }, 1000); } return new Y.Promise(getMessage); promise}
  5. 5. then() method to get value when availableor catch errors during value computation var promise = async(); promise.then(onFulfilled, onRejected); promise .then( onFulfilled(value) onRejected(reason) )
  6. 6. then() method to get value when available or catch errors during value computationSynchronous code analogyvar value, error;try { value = sync(); promise .then(} catch (reason) { onFulfilled(value) error = reason; onRejected(reason)} )if (error) { onRejected(reason);} else { onFulfilled(value);}
  7. 7. Promise Resolution Fulfillment Rejectionpromise .then( promise .then( value onFulfilled( value ) reason onFulfilled(value) onRejected(reason) onRejected( reason ) ) ) fulfill reject
  8. 8. then() returns a promisevar promiseA = async();var promiseB = promiseA.then(onFulfilled, onRejected); promiseA .then( onFulfilled(value) onRejected(reason) ) promiseB
  9. 9. then() returns a promiseSynchronous code analogyvar valueA, valueB, error;try { valueA = sync(); promiseA .then(} catch (reason) { onFulfilled(value) error = reason; onRejected(reason)} )if (error) { onRejected(reason); promiseB} else { valueB = onFulfilled(valueA);}
  10. 10. callback return values fulfill their promises return return.then( .then( onFulfilled(value) value onRejected(reason) value) ) promise promise value fulfill value fulfill
  11. 11. callback errors reject their promises throw throw.then( .then( onFulfilled(value) error onRejected(reason) error) ) promise promise reason reject reason reject
  12. 12. Promise Chaining var promiseC = async() .then(onFulfilledA, onRejectedA) .then(onFulfilledB, onRejectedB);promiseA .then( onFulfilledA(value) onRejectedA(reason) ) promiseB .then( onFulfilledB(value) onRejectedB(reason) ) promiseC and so on...
  13. 13. callback resolution through the chainpromise1 .then( returnvalue A onFulfilled(value) A value value B onRejected(reason) ) fulfill fulfill promise2 value B .then( return onFulfilled(value) B value value C onRejected(reason) ) fulfill promise3 value C
  14. 14. Synchronous code analogyvar valueA, valueB, valueC, error = false;try { valueA = sync();} catch (reasonA) { error = true; valueA = reasonA;}if (error) { try { valueB = onRejectedA(valueA); error = false; } catch (reasonB) { valueB = reasonB; }} else { try { valueB = onFulfilledA(valueA); } catch (reasonB) { error = true; valueB = reasonB; }}
  15. 15. Synchronous code analogyvar valueA, valueB, valueC, error = false;try { valueA = sync();} catch (reasonA) { error = true; initial promise generation valueA = reasonA;}if (error) { try { valueB = onRejectedA(valueA); error = false; } catch (reasonB) { valueB = reasonB; }} else { try { valueB = onFulfilledA(valueA); } catch (reasonB) { error = true; valueB = reasonB; }}
  16. 16. } catch (reasonA) { error = true; valueA = reasonA;} Synchronous code analogyif (error) { try { valueB = onRejectedA(valueA); error = false; } catch (reasonB) { valueB = reasonB; }} else { for each intermediate promise... try { valueB = onFulfilledA(valueA); } catch (reasonB) { error = true; valueB = reasonB; }}if (error) { valueC = onRejectedB(valueB);} else { final promise callbacks valueC = onFulfilledB(valueB);}
  17. 17. value/reason pass thru if callback missingpromise1 .then( return value Bvalue A onFulfilled(value) A value onRejected(reason) ) fulfill promise2 .then( pass thru value B null onRejected(reason) ) promise3 .then( value B onFulfilled(value) B value onRejected(reason) )
  18. 18. callbacks can return promises .then( return returned onFulfilled(value) promise ) promise .then( return returned onRejected(reason) promise ) promise
  19. 19. callbacks can return promises .then( return returned onFulfilled(value) Not a value (yet) promise ) promise .then( return returned onRejected(reason) Not a value (yet) promise ) promise
  20. 20. returned promises postpone continuation.then( return onFulfilled(value) returned promise) promise .then( onFulfilled(value) onRejected(reason) )
  21. 21. returned promises postpone continuation.then( inserted onFulfilled(value) returned .then( promise onFulfilled(value)) onRejected(reason) promise ) “wait for me” .then( onFulfilled(value) onRejected(reason) )
  22. 22. returned promises postpone continuation.then( inserted onFulfilled(value) returned .then( promise onFulfilled(value)) value onRejected(reason) promise ) fulfill “wait for me” .then( onFulfilled(value) onRejected(reason) )
  23. 23. returned promises postpone continuation.then( onFulfilled(value) returned .then( promise onFulfilled( value )) value onRejected(reason) promise ) fulfill .then( onFulfilled(value) onRejected(reason) )
  24. 24. returned promises postpone continuation.then( onFulfilled(value) returned .then( promise onFulfilled( value )) value onRejected(reason) promise ) value fulfill . omise.. i nal pr e s orig e resolv en t valu .then( f ulfillm onFulfilled(value) onRejected(reason) )
  25. 25. returned promises postpone continuation .then( onFulfilled(value) returned .then( promise onFulfilled( value ) ) value onRejected(reason) promise ) value fulfill . omise.. i nal pr e s orig e resolv...then chain continues en t valu .then( f ulfillm onFulfilled( value ) onRejected(reason) )
  26. 26. Promises/A+ spechttp://promises-aplus.github.com/promises-spec/ https://github.com/promises-aplus/promises-spec

×