Angular promises and http
0 likes1,578 views
JavaScript Async, Angular $q service and $http service Full presentation: https://slides.com/alexebogdan/angular-promises-and-http
Ad
More Related Content
What's hot (20)
Viewers also liked (8)
Ad
Similar to Angular promises and http (20)
Ad
More from Alexe Bogdan (6)
Recently uploaded (19)
Angular promises and http
- 3. function loadPage{ $('#spinner').show(); setupPage(); $('#spinner').hide(); } function loadPage{ $('#spinner').show(); setTimeOut(function(){ setupPage(); $('#spinner').hide(); }, 0); }
- 4. JavaScript is single threaded (*mostly); Long running process will kill user experience: UI elements will be unresponsive; animations will pause Long running task will timeout; Most I/O APIs are async: , , ; Timers: setTimeout(), ; Other APIs
- 5. The Event Loop is a queue of callback functions; When an async function executes, the callback function is pushed into the queue; The JavaScript engine doesn't start processing the event loop until all the code was executed; The event loop is a first-in-first-out (FIFO) queue;
- 7. Callbacks: function doSomethingAsync(callBack){ setTimeout(function(){ //..... callBack(); }, 200); } doSomethingAsync(function(){ //will be called after 200ms }); Callbacks Hell: function doSomethingAsync(callBack){ //... } doSomethingAsync(function(result){ //... doSomethingAsync(function(result){ //... doSomethingAsync(function(result){ //... }); }); });
- 8. function doSomethingAsync(callBack){ //... } var promise = doSomethingAsync(); promise .then(function(result){ //... if(!ok) throw new Error(); return doSomethingAsync2(); }) .then(function(result2){ //... }, function(reason){ // Handle the error });
- 10. A promise is always async; A promise represents a task that will finish in the future; A promise expose a function ( ) : returns a new promise; allows for the attachment of that will be executed based on state; handlers are guaranteed to execute in order attached; Promises become by a value; Promises get by exceptions;
- 13. Angular uses promises for everything that is async: ; ; ; much more.
- 14. //Service function doSmth(){ defered = $q.defer(); Result of asyncOperation(function(error, data){ if (!error) defered.resolve(data); else defered.reject(error); }); return defered.promise; } //Controller doSmth().then(function(value){ console.log(value); }, function(err){ console.error(err); }); console.log("The value will be shown after this.");
- 15. Result of doSmth() .then(function(value){ return value + 10; }, errorFn, notifyFn) .then(function(value){ return $q.reject(new Error()); }) .catch(function(err){ console.err(err); }) .finally(callbackFn);
- 17. core Angular service for communication with remote HTTP servers; can communicate via the browser's or via ; works hand in hand with service.
- 18. $http({method: 'GET', url: '/someUrl'}) .success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }) .error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. }); *Since the returned value is a , you can also use for registering callbacks.
- 19. $http.get $http.head $http.post $http.put $http.delete $http.jsonp $http.patch
- 21. Example Link
- 22. Example Link