![The Helpers
var promise = $q.when(value)
var promise = $q.all([arrayOfPromises])
$q](https://image.slidesharecdn.com/promisesthetaoofangular-140716151248-phpapp01/85/Promises-The-Tao-of-Angular-18-320.jpg)
Promises, The Tao of Angular
- 1. promises the tao of angular AngularJS Portugal meetup.com/AngularJS-Portugal/ twitter.com/angularjspt Google+ community
- 2. Vitor Fernandes [email protected] ● 15+ years developer ● CTO with Gotv Media Software since 2002 ● Creator of AngularJS Portugal group Visual Basic 5, Microsoft WebTv ASP/Jscript, .Net Framework 1 through 4.5 desktop apps, Titanium Mobile Javascript Mobile apps, AngularJS last 2 months /$ whoami
- 3. promises the tao of angular _________________________________ Source code: github.com/vmlf01/promiseSamples Preview: promisesamples.divshot.io
- 4. What are promises? A promise is a container that holds or will hold a value WHAT?!? It's a trust thing! With promises, you are always guaranteed to get one and only one value back (even if it's a failure) Trust me :) what are promises
- 5. What do they do? Promises are a way of thinking synchronously and doing asynchronously. What is it good for?! Unlike war, absolutely everything. Say it again! what are promises 1
- 6. A promise can be: Pending Fulfilled Rejected Once a Promise is fulfilled or rejected, it’ll remain in that state forever. promise states 2
- 7. promiseForResult.then(onFulfilled, onRejected); ● Only one of onFulfilled or onRejected will be called. ● onFulfilled will be called with a single fulfillment value ( return⇔ value). ● onRejected will be called with a single rejection reason (⇔ thrown exception). ● If the promise is already settled, the handlers will still be called once you attach them. ● The handlers will always be called asynchronously. the promised land in angular, domenic denicola promise guarantees 3
- 8. Dinner out: 1.How many people? 2.Which restaurant? 3.Book restaurant 4.Show up on time 5.Eat programming 101: algorithms
- 9. Dinner out: Well that's all fine and dandy, but what about the other stuff? In reality, you cannot block waiting for each step to complete. You need to go about your life! (Web) programming is async. programming 101: algorithms
- 10. Dinner out: 1.How many people? 2.Which restaurant? 3.Book restaurant 4.Show up on time 5.Eat parallel execution Done at same time
- 11. Dinner out: 1.How many people? 2.Which restaurant? 3.Book restaurant 4.Show up on time 5.Eat handle exceptions What if not available?
- 12. Dinner out: 1.How many people? 2.Which restaurant? 3.Book restaurant 4.Show up on time 5.Eat don't block, give feedback Table not ready, wait a bit
- 13. Dinner out: 1.How many people? 2.Which restaurant? 3.Book restaurant 4.Show up on time 5.Eat finally
- 14. ● Implemented in AngularJS $q service ● Inspired by Kris Kowal's Q library ● Contains only the most important features ● Integrated with AngularJS's digest/event loop promises in AngularJS
- 15. function aSimplePromise() { var deferredTask = $q.defer(); deferredTask.resolve( 'I always keep my promises!' ); return deferredTask.promise; } $q
- 16. The deferred API var deferred = $q.defer() deferred.resolve(value) deferred.reject(reason) deferred.notify(status) var promise = deferred.promise $q
- 17. The promise API promise.then(onFulfilled, onRejected, onNotify) promise.catch(onRejected) promise.finally(callback) $q
- 18. The Helpers var promise = $q.when(value) var promise = $q.all([arrayOfPromises]) $q
- 19. AngularJS digest cycle the promised land in angular, domenic denicola
- 20. function MyController($scope, $http) { $scope.text = "loading"; $scope.doThing = function () { $http.get("somefile.json").then(function (response) { $scope.text = response.data; }); }; } // Works! Angular’s promises are integrated into the digest cycle the promised land in angular, domenic denicola $q resolution inside digest cycle 4
- 21. Promises are all around in AngularJS! $http $resource $route $timeout ... The Tao of Angular
- 22. ● then() returns a promise ● Callback return values fulfill their promises ● Callback errors reject their promises ● Value/reason passthru if callback missing ● Callbacks can return promises the 5 commandments promises. the basics, from promises/A+, luke smith 5..9
- 23. Can we live without them? ... Why would you? ● Wasted promises → Garbage collection ● Silent fails promises problems
- 24. ● Cleaner method signatures ● Uniform return/error semantics ● Easy composition ● Easy sequential/parallel join ● Always async ● Exception-style error bubbling why promises are awesome callbacks, promises, and coroutines (oh my!), domenic denicola
- 25. Wait, wait, wait... But how does it work? how do promises work?
- 26. Well, eh... Js promises are just callbacks in hidding! Did you think it was magic??? how do promises work
- 27. function Promise(fn) var state = 'pending'; var value; var deferred = null; function resolve(newValue) { value = newValue; state = 'resolved'; if(deferred) { handle(deferred); } } function handle(handler) { if(state === 'pending') { deferred = handler; return; } if(!handler.onResolved) { handler.resolve(value); return; } var ret = handler.onResolved(value); handler.resolve(ret); }
- 28. function Promise(fn) this.then = function(onResolved) { return new Promise(function(resolve) { handle({ onResolved: onResolved, resolve: resolve }); }); }; fn(resolve);
- 29. promise call flow promise .resolve() .then() .handle() Add a new promise to the chain Resolve current promiseand next in chain
- 30. function handle(handler) If promise state is pending, store handler to call it back later when promise resolves If there is no onResolved callback for this promise, then take its value and passthru to next promise in chain Call this promise onResolved handler Then, resolve next promise in chain with the return value function handle(handler) { if(state === 'pending') { deferred = handler; return; } if(!handler.onResolved) { handler.resolve(value); return; } var ret = handler.onResolved(value); handler.resolve(ret); }
- 31. Promises/A+ Specification http://promises-aplus.github.io/promises-spec/ Callbacks, Promises, and Coroutines (oh my!), Domenic Denicola http://www.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asyn The Promised Land in Angular, Domenic Denicola http://www.slideshare.net/domenicdenicola/the-promised-land-in-angular Promises, Luke Smith http://www.slideshare.net/drprolix/promises-16473115 JavaScript Promises ... In Wicked Detail, Matt Greer http://www.mattgreer.org/articles/promises-in-wicked-detail/ references
- 32. promises the way of the angular Vitor Fernandes [email protected] AngularJS Portugal meetup.com/AngularJS-Portugal/ twitter.com/angularjspt Google+ community Thanks