1. AngularJS By Alireza Mirian At HasinTech. Section 4 Promise, Tools and Best Practices

2. Event loop Single thread Everything is non-blocking Event handlers AKA callbacks messages are added when an event occurs while(queue.waitForMessage()) { queue.processNextMessage(); } Something got clicked Response from server received Something got focused

3. Event loop example document.body.addEventListener("load", kickoff); function kickoff(){ // add other listeners document.getElementById("someElement").addEventListener("click", clickHandler1); function clickHandler1(){} function clickHandler2(){ $.get("api/1/books/123", function getRequestCallback(){ // do something with book 123 }) } } Document load SomeElement got clicked kickoff clickHandler1 getRequestCallback Time Ajax response received clickHandler2

4. Problems with callbacks Tendency for ugliness: getCurrentUser(function(error, user){ getPostsOfUser(user.id, function(error, posts){ showPosts(posts); }) }); var user = getCurrentUser(); var posts = getPostsOfUser(user.id); showPosts(posts);

5. Problems with callbacks Super complicated error handling: getCurrentUser(function(error, user){ if(error){ handleError(error); } else{ getPostsOfUser(user.id, function(error, posts){ if(error){ handleError(error); } else{ showPosts(posts); } }) } }); try{ var user = getCurrentUser(); var posts = getPostsOfUser(user.id); showPosts(posts); } catch(error){ handleError(error); }

7. Why callback hell Losing our call stack when passing a callback Can not return in a callback function Can not throw exception getCurrentUser(assertUserIsLoyal); function assertUserIsLoyal(user){ if(user.numOfSignins + user.lastSignIn/Date.now() < LOYALITY_THRESHOLD){ throw new Error("User is not loyal enough!"); } } getCurrentUser(computeHowLoyalUserIs); function computeHowLoyalUserIs(user){ return user.numOfSignins + user.lastSignIn/Date.now(); }

8. Gives you back goodness of sync programming Promise

9. Promise Spec Result of an asynchronous operation A promise must be in one of three states: pending, fulfilled, or rejected: Pending: may transition to either the fulfilled or rejected state. Fulfilled: has a value which cannot change Rejected: has a reason which cannot change A promise either gets fulfilled/resolved with a value or rejected with a reason/error https://github.com/promises-aplus/promises-spec ‐A sync function either returns a value or throws an error ‐An async function can not return or throw immediately, but it can return a promise which can get resolved to a value or rejected with a reason

10. Promise Spec cont. Then returns a promise: x If either successHandler or errorHandler return a value x, promise2 will get resolved with value x e e. If either successHandler or errorHandler throws an exception e, promise2 will get rejected with reason e. makeAjaxCall(successHandler, errorHandler); makeAjaxCall().then(successHandler, errorHandler); https://github.com/promises-aplus/promises-spec promise2 = promise1.then(successHandler, errorHandler);

11. Promise examples: sequence Sync: Callback: Promise: var user = getCurrentUser(); var posts = getPostsOfUser(user.id); ui.updatePosts(posts); getCurrentUser(function(user){ getPostsOfUser(user.id, function(){ ui.updatePosts(posts); }); }); getCurrentUser().then(function(user){ return getPostsOfUser(user.id); }).then(function(posts){ ui.updatePosts(posts); });

12. Promise examples: error handling Sync: Promise: getCurrentUser().then(function(user){ return getPostsOfUser(user.id); }).then(function(posts){ ui.updatePosts(posts); }, handleError); try{ var user = getCurrentUser(); var posts = getPostsOfUser(user.id); ui.updatePosts(posts); } catch(error){ handleError(error); }