Transcript
user = getUser(id)
console.log(user.name) # won’t work if getUser() is async
# callback
getUser id, (user) -> console.log(user.name)
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)
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
Promises/A+ states
pending initial state, not fulfilled or rejectedfulfilled successful operationrejected failed operationsettled the Promise is either fulfilled or
rejected, but not pending
Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
Execute in sequencegetUser(id) (user) ->
getNewTweets user, (tweets) ->
updateTimeline(tweets)
getUser(id).then (user) ->
getNewTweets(user).then (tweets) ->
updateTimeline(tweets)
Execute in sequencegetUser(id) (user) ->
getNewTweets user, (tweets) ->
updateTimeline(tweets)
getUser(id).then (user) ->
getNewTweets(user).then (tweets) ->
updateTimeline(tweets)
getUser(id)
.then(getNewTweets)
.then(updateTimeline)
Execute in paralleltmp = []
$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(', ')
Execute in parallelfirst = $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(', ')
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
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
CompatibilityIn general, JavaScript promises API will treat anything with a then method as promise-like
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'}
CompatibilityAngularJS: 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
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
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
Read morehttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise https://docs.angularjs.org/api/ng/service/$qhttp://www.webdeveasy.com/javascript-promises-and-angularjs-q-service/
top related