The document discusses JavaScript promises and how they can be used to handle asynchronous operations. Promises allow asynchronous functions to return values asynchronously by attaching callbacks to the promise object. This avoids callback hell and makes asynchronous code easier to read and maintain. The document covers how promises can be chained together, executed in parallel, cached, and passed around between functions. It also discusses promise implementations in different frameworks like jQuery, Angular, and how promises can interact across frameworks.

1. JavaScript Promises
@tomaszbak

2. user = getUser(id)
console.log(user.name) # won’t work if getUser() is async

3. user = getUser(id)
console.log(user.name) # won’t work if getUser() is async
# callback
getUser id, (user) -> console.log(user.name)

4. user = getUser(id)
console.log(user.name) # won’t work if getUser() is async
# callback
getUser id, (user) -> console.log(user.name)
# promise
getUser(id).then (user) -> console.log(user.name)

5. Promises/A+
The Promise interface represents a proxy for a
value not necessarily known when the
promise is created. It allows you to associate
handlers to an asynchronous action's eventual
success or failure.
Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

6. Promises/A+ states
pending initial state, not fulfilled or rejected
fulfilled successful operation
rejected failed operation
settled the Promise is either fulfilled or
rejected, but not pending
Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

7. Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

8. Execute in sequence
getUser(id) (user) ->
getNewTweets user, (tweets) ->
updateTimeline(tweets)

9. Execute in sequence
getUser(id) (user) ->
getNewTweets user, (tweets) ->
updateTimeline(tweets)
getUser(id).then (user) ->
getNewTweets(user).then (tweets) ->
updateTimeline(tweets)

10. Execute in sequence
getUser(id) (user) ->
getNewTweets user, (tweets) ->
updateTimeline(tweets)
getUser(id).then (user) ->
getNewTweets(user).then (tweets) ->
updateTimeline(tweets)
getUser(id)
.then(getNewTweets)
.then(updateTimeline)

11. Execute in parallel
tmp = []
$http.get('/app/data/first.json').success (data) ->
tmp.push data
$http.get('/app/data/second.json').success (data) ->
tmp.push data
$http.get('/app/data/third.json').success (data) ->
tmp.push data
$scope.combinedNestedResult = tmp.join(', ')

12. Execute in parallel
first = $http.get('/app/data/first.json')
second = $http.get('/app/data/second.json')
third = $http.get('/app/data/third.json')
$q.all([first, second, third]).then((result) ->
[result[0], result[1], result[2]]
).then (tmpResult) ->
$scope.combinedResult = tmpResult.join(', ')

13. Promise can be cached
getUser: (id) ->
@users ||= {}
@users[id] ||= Api.getUser(id)

14. then(successCallback, errorCallback, notifyCallback)
updateUser().then(
(res) -> console.log 'Success'
,
(err) -> console.log "Error: #{err}"
,
() -> console.log 'Finally'
)
Source: https://docs.angularjs.org/api/ng/service/$q

15. catch(errorCallback) == promise.then(null, errorCallback)
finally(callback, notifyCallback)
updateUser()
.then (res) -> console.log 'Success'
.catch (err) -> console.log "Error: #{err}"
.finally -> console.log 'Finally'
Source: https://docs.angularjs.org/api/ng/service/$q

16. Implementations
jQuery.promise()
Q (Node.js)
$q (Angular)
RSVP.js (Ember)
promise.rb (Ruby)
… many more

17. Compatibility
In general, JavaScript promises API will treat anything with
a then method as promise-like

18. Compatibility
“anything with a then method” - my tests helper:
@promiseStub = (success, failure) ->
then: (callback) -> callback(success,failure)
Example usage:
spyOn(Api, 'getUser').andReturn promiseStub {id: 1, name: 'Tom'}

19. Compatibility
AngularJS:
angularPromise = $q.when($.ajax('/whatever.json'))
Wraps an object that might be a value or a (3rd party) then-
able promise into a $q promise
Source: https://docs.angularjs.org/api/ng/service/$q

20. AngularJS $q
$q can be used in two fashions
● Kowal's Q or jQuery's Deferred
● other, similar to ES6 promises
Source: https://docs.angularjs.org/api/ng/service/$q

21. Summary
● promises make code much cleaner and
easier to debug and test
● promises can be:
○ chained (each .than modified result for next .than)
○ executed in parallel ( $q.all(promisesArray) )
○ stored (i.e. for caching)
○ passed as argument to function/object/directive/...
○ returned from function

22. Read more
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://docs.angularjs.org/api/ng/service/$q
http://www.webdeveasy.com/javascript-promises-and-angularjs-q-service/