1) Promises are objects that represent the eventual completion (or failure) of an asynchronous operation, rather than using callbacks. They provide a cleaner way to handle asynchronous code than callbacks alone. 2) A promise has three possible states: pending, fulfilled, and rejected. Promises allow multiple handlers to be attached to an asynchronous operation via the .then() method. Handlers will be called even if attached after the promise is settled. 3) Common uses of promises include handling data retrieval from external sources, loading assets, and handling animations. Promises are well-suited for any potentially asynchronous operation.

1. Getting comfortable
with JS promises
Asa Kusuma

2. JavaScript Async Basics
• Callbacks do not necessarily imply async
• JavaScript code cannot run concurrently*
• setTimeout(fn,0)/setImmediate/nextTick

3. Promises are a replacement for:
doSomething(function(err, result){…});

4. Why callbacks are
less than ideal

5. Complex flow
control is difficult

6. Once an operation
has started, you can’t
add more handlers

7. Operations have a single
callback and must be directly
coupled to all reacting code.

8. What’s a promise?

9. A promise is an object that
represents a potentially
asynchronous operation

10. A promise is an
object with a then()
function

11. The A+ Spec
• 3 states: pending, fulfilled, rejected (settled*)
• .then(), which takes handler functions as params
• Can call multiple times; attach multiple handlers
• Handler called even if then() called after settled
• Once fulfilled or rejected, cannot change state

12. Settled
Pending
Fulfilled Rejected
onFulfilled() onRejected()

13. .then(onFulfill, onReject)
• onFulfill called when promise is fulfilled
• onReject called when promise is rejected
• Handler execution deferred to nextTick
• Handlers have one argument
• Return val becomes promise returned by then()***

14. Promise lingo
• Handler parameter
• Fulfillment value
• Rejection reason
• Resolved == settled

15. fulfilledPromise
.then(function(){
console.log(‘world!’);
});
console.log(‘Hello, ’);

16. Exercise 0:
Hello World

17. myPromise
.then(function(num){
return 2 + num;
}).then(function(num2){
return 5 + num2;
}).then(printNumber);

18. createContext()
.then(fetchUser)
.then(initializeRouters)
.then(initializeBindings)

19. Exercise 1:
Chaining

20. How are promises
created?

21. var myPromise =
new Promise(function(f, r) {
setTimeout(function() {
f(‘Hello world’);
}, 500);
});
Closure Syntax

22. var d = RSVP.defer();
!
setTimeout(function() {
d.resolve(‘Hello world’);
}, 500);
!
var myPromise = d.promise;
Deferred Syntax

23. Deferreds are the
read-write parent of
the read-only promise

24. Exercise 2:
Creating Promises

25. Why promises?

26. Compose functions without
introducing coupling to the
functions themselves

27. Async operations are
1st class citizens,
represented as objects

28. Async or sync?
Promise don’t care

29. Sane flow control

30. Use promises to
wrap any potentially
non-blocking code

31. Common uses of promises
• Data retrieval
• Anything involving an external call
• Loading CSS
• Animation
• Template rendering

32. Promise vs Event vs Stream
• Promises are for operations executed once
• Events and streams are for repeated events
• Promises and streams are both object-based

33. High-order functions
• Functions that input and/or output functions
• Examples
• _.partial(func, arg)
• _.bind(func, context)
• Very useful with promises

34. Promise Libraries
• Promise creation
• Promise inspection
• Utility functions
• Error handling
• Native vs. Library

35. Utility Functions
• .all()/allSettled()
• .hash()
• .spread()
• .map()
• Static vs member functions

36. Error handling
• Error in onFulfill will reject returned promise
• Throwing rejects next promise in chain
• Non A+ features
• Long stack traces
• Global error listener

37. $.ajax()
.then(onFulfill, onReject)
.then(output, errorPage);
Where jQuery will $@#% you

38. Questions?
+
More Exercises
akusuma@linkedin.com