{"id":20560,"date":"2015-06-04T02:18:05","date_gmt":"2015-06-03T20:48:05","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=20560"},"modified":"2017-08-03T14:17:09","modified_gmt":"2017-08-03T08:47:09","slug":"angularjs-deferred-promises-basic-understanding","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/","title":{"rendered":"AngularJS Deferred &amp; Promises- Basic Understanding"},"content":{"rendered":"<div class=\"container\">\n<div class=\"page-header\">\n<h1 id=\"top-of-page\" class=\"page-header\" style=\"text-align: center;\">AngularJS Deferred &amp; Promises-\u00a0Basic Understanding<\/h1>\n<\/div>\n<h3 style=\"text-align: center;\"><span class=\"glyphicon glyphicon-pencil\">Table of Contents<\/span><\/h3>\n<ul class=\"list-group\">\n<li class=\"list-group-item\"><a title=\"Introduction to Asynchronous AngularJs\" href=\"#intro-to-async-ajs\">1. Introduction to Asynchronous AngularJs<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"callbacks-basic-understand\" href=\"#callbacks-basic-understand\">2. Callbacks- Basic Understanding<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"callback-hell\" href=\"#callback-hell\">3. Callback Hell<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"Promise- A Better way to handle callbacks\" href=\"#promise-start\">4. Promise- A\u00a0Better way of handling callbacks<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"promise-in-angularjs\" href=\"#promise-in-angularjs\">5. Promise In AngularJS- $q Service<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"deferred-api\" href=\"#deferred-api\">6. Deferred API<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"promise-api\" href=\"#promise-api\">7. Promise API<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"other-services\" href=\"#other-services\">8. Some other promise based AngularJs Services<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"other-features\" href=\"#other-features\">9. Some other useful features- $q.all()<\/a><\/li>\n<\/ul>\n<h3 id=\"intro-to-async-ajs\" style=\"text-align: center;\">1. Introduction to Asynchronous AngularJs<\/h3>\n<p><a title=\"Angular development\" href=\"https:\/\/2thenew.xyz\/front-end-angularjs-development\">AngularJs,<\/a> It is the most used front-end MVC framework.\u00a0\u00a0It is mostly used to create single page front-end application. When you have started working on AngularJS. You have to deal with the asynchronous call. In respect ti that you must come to know <strong>$http<\/strong> and <strong>$resource<\/strong> services.\u00a0These both services are used to get server side data\u00a0asynchronously. To handle an asynchronous call, you need to define callbacks. <strong>Deferred-Promises<\/strong> is a design pattern which helps you to deal with these callbacks.<\/p>\n<p>Before starting \u00a0Deferred &amp; Promises in AngularJS, Let&#8217;s understand callback and why we actually need\u00a0Deferred-Promises in AngularJS or any other language.<\/p>\n<h3 id=\"callbacks-basic-understand\" style=\"text-align: center;\">2. Callbacks<\/h3>\n<p>In JavaScript, a function is a special kind of object\/ data type which you can pass as an argument. This is one of the most useful features of JavaScript programming language. When you call a function and you do not know when that function will return required result. Here you can pass a callback, which can be call when the result will come.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">jQuery:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    var successHandler = function (data) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s data: %j&#8217;, data)<br \/>\n    };<br \/>\n    var ErrorHandler = function (error) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s error:&#8217;, error)<br \/>\n    };<br \/>\n    $.ajax({<br \/>\n        url: &#8216;https:\/\/api.twitter.com\/1.1\/search\/tweets.json?q=%23freebandnames&amp;since_id=24012619984051000&amp;max_id=250126199840518145&amp;result_type=mixed&amp;count=4&#8217;,<br \/>\n        data: {<br \/>\n            format: &#8216;json&#8217;<br \/>\n        },<br \/>\n        error: ErrorHandler,<br \/>\n        success: successHandler,<br \/>\n        type: &#8216;GET&#8217;<br \/>\n    });<br \/>\n})()      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">AngularJS:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    var successHandler = function (response) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s data: %j&#8217;, response.data)<br \/>\n    };<br \/>\n    var ErrorHandler = function (response) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s error:&#8217;, response.error)<br \/>\n    };<br \/>\n    $http<br \/>\n        .get(&#8216;https:\/\/api.twitter.com\/1.1\/search\/tweets.json?q=%23freebandnames&amp;since_id=24012619984051000&amp;max_id=250126199840518145&amp;result_type=mixed&amp;count=4&#8217;)<br \/>\n        .success(successHandler);<br \/>\n})()      <\/p>\n<p>  [\/js]<\/p>\n<\/div>\n<\/div>\n<p><span class=\"bg-warning\">Here in above example\u00a0successHandler, ErrorHandler is callbacks which run when success or error event fire accordingly. These are the most basic example I found on the internet. Later on, we will learn how to handle these <a title=\"Intuitive Frontend Interfaces with AngularJS\" href=\"https:\/\/2thenew.xyz\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">events efficiently in AngularJS<\/a>.<\/span><\/p>\n<h3 id=\"callback-hell\" style=\"text-align: center;\">3. Callback Hell<\/h3>\n<p>It is not a problem to work with $http\/ $resource. The real problem arise when you have to deal with multiple callbacks which are dependent on each other. The result would be something like this-<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    asyncCall(function (err, data1) {<br \/>\n        if (err) return callback(err);<br \/>\n        anotherAsyncCall(function (err2, data2) {<br \/>\n            if (err2) return calllback(err2);<br \/>\n            oneMoreAsyncCall(function (err3, data3) {<br \/>\n                if (err3) return callback(err3);<br \/>\n                \/\/ are we done yet?<br \/>\n            });<br \/>\n        });<br \/>\n    });<br \/>\n})()<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<p><span class=\"bg-warning\">This is known as callback hell. It is hard to understand and creates a lot of confusion.<\/span><\/p>\n<h3 id=\"promise-start\" style=\"text-align: center;\">4. Promise- A\u00a0Better way of\u00a0handling callbacks<\/h3>\n<p>By the <a title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">definition<\/a>, \u00a0Promise is an interface which represents a proxy value. ie. We don&#8217;t know the value at the time it&#8217;s created. This promise will return value like any synchronous function in future. There can be\u00a0several states for a promise.<\/p>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><strong>pending:<\/strong> initial state, not fulfilled\/rejected.<\/li>\n<li class=\"list-group-item alert-warning\"><strong>fulfilled:<\/strong> successful operation<\/li>\n<li class=\"list-group-item alert-warning\"><strong>rejected:<\/strong> failed operation.<\/li>\n<li class=\"list-group-item alert-warning\"><strong>settled:<\/strong> the Promise is either fulfilled or rejected, but not pending.<\/li>\n<\/ul>\n<p>The promise is something like a man ask his son to get a weather\u00a0forecast. And son returns a promise that he will go and get the weather forecast. There could be three possible outcomes:<\/p>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\">A) Weather forecast retrieved! Sunshine. <small>\/\/ promise fulfilled +ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\">B) Weather forecast retrieved! Cloudy and rain. <small>\/\/ promise fulfilled -ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\">C) Couldn&#8217;t get the weather forecast. <small>\/\/promise was rejected<\/small><\/li>\n<\/ul>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    \/\/ function somewhere in father-controller.js<br \/>\n    var makePromiseWithSon = function () {<br \/>\n        \/\/ This service&#8217;s function returns a promise, but we&#8217;ll deal with that shortly<br \/>\n        SonService.getWeather()<br \/>\n            \/\/ then() called when son gets back<br \/>\n            .then(function (data) {<br \/>\n                \/\/ promise fulfilled<br \/>\n                if (data.forecast === &#8216;good&#8217;) {<br \/>\n                    prepareFishingTrip();<br \/>\n                } else {<br \/>\n                    prepareSundayRoastDinner();<br \/>\n                }<br \/>\n            }, function (error) {<br \/>\n                \/\/ promise rejected, could log the error with: console.log(&#8216;error&#8217;, error);<br \/>\n                prepareSundayRoastDinner();<br \/>\n            });<br \/>\n    };<br \/>\n})()<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<p>For better understanding, you can refer to\u00a0<a title=\"http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html\" href=\"http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html\">promise-as-cartoon<\/a>.<\/p>\n<h3 id=\"promise-in-angularjs\" style=\"text-align: center;\">5. Promise In Angularjs- $q Service<\/h3>\n<p>Promises in AngularJS is provided by <strong><span style=\"color: #800000;\">$q service<\/span>.\u00a0<\/strong>It has reach feature like any other Promise library.\u00a0<span style=\"color: #800000;\"><strong><code>$q<\/code><\/strong><\/span> service is a service that helps you to run your code asynchronously. As its documentation say, this is inspired by Chris Kowal&#8217;s Q library (<a href=\"https:\/\/github.com\/kriskowal\/q\">github.com\/kriskowal\/q<\/a>).<\/p>\n<h4>Deferred Object:<\/h4>\n<p>Deferred is an object which exposes the promise. It has \u00a0mainly three methods\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, and <span style=\"color: #ff6600;\">notify()<\/span>.\u00a0Deferred returns promise object. When\u00a0Deferred completes, You call methods either\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, and <span style=\"color: #ff6600;\">notify() .\u00a0<\/span>It calls callback register to either\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, or\u00a0<span style=\"color: #ff6600;\">notify() <\/span>according to how it has completed.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nfunction sayHelloAsync(name) {<br \/>\n    return function () {<br \/>\n        var defer = $q.defer()<br \/>\n        setTimeout(function() {<br \/>\n            \/\/Greet when your name is &#8216;deepak&#8217;<br \/>\n            if (name == &#8216;deepak&#8217;) {<br \/>\n                defer.resolve(&#8216;Hello, &#8216; + name + &#8216;!&#8217;);<br \/>\n            }<br \/>\n            else {<br \/>\n                defer.reject(&#8216;Greeting &#8216; + name + &#8216; is not allowed.&#8217;);<br \/>\n            }<br \/>\n        }, 1000);<\/p>\n<p>        return defer.promise<br \/>\n    }<br \/>\n}      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<h4>Promise\u00a0Object:<\/h4>\n<p>A promise is an object which is return by a Deferred object. You can register different callbacks for different\u00a0events\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, or\u00a0<span style=\"color: #ff6600;\">notify() <\/span>and it will execute when the async function has completed.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar helloPromise = sayHelloAsync(&#8216;deepak&#8217;);<\/p>\n<p>helloPromise.then(function (data) {<br \/>\n    console.log(data);<br \/>\n}, function (error) {<br \/>\n    console.error(data);<br \/>\n})      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div id=\"deferred-api\" class=\"panel panel-default\">\n<div class=\"panel-heading\">Deferred API:<\/div>\n<div class=\"panel-body\">A new instance of defer is created by calling <em><strong>$q.defer()<\/strong><\/em>. It has mainly three methods.<\/div>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.resolve(value)<\/span>\u00a0&#8211; This method is use to resolve the derive promise ie.\u00a0\/\/ promise fulfilled -ve<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.reject(value)<\/span>\u00a0&#8211; This method is use to reject the derived promise ie.\u00a0<small>\/\/ promise fulfilled -ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.notify(value)<\/span>\u00a0&#8211; This method is used to notify the current state of the\u00a0derived promise<\/li>\n<\/ul>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar getTodoList = function (url) {<br \/>\n    var deferred = $q.defer();<br \/>\n    var data = [<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn Web-Worker&#8230;&quot;,<br \/>\n            &quot;stared&quot;: &quot;nopes!!: (&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;Infinity&quot;<br \/>\n        },<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn Monkey-Patching&#8230;&quot;,<br \/>\n            &quot;stared&quot;: &quot;Yup!!!&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;1day&quot;<br \/>\n        },<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn ui-router&quot;,<br \/>\n            &quot;stared&quot;: &quot;nopes!!: (&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;99999hr&quot;<br \/>\n        }<br \/>\n    ];<br \/>\n    var percentage = 0;<br \/>\n    var interval = $interval(function () {<br \/>\n        percentage = percentage + 5;<br \/>\n        deferred.notify({percentage: percentage});<br \/>\n        if (percentage &gt; 99) {<br \/>\n            $interval.cancel(interval);<br \/>\n            deferred.resolve(data)<br \/>\n        }<\/p>\n<p>    }, 500)<br \/>\n    return deferred.promise;<br \/>\n}      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div id=\"deferred-api\" class=\"panel panel-default\">\n<div class=\"panel-heading\">Promise API<\/div>\n<div class=\"panel-body\">A new promise is created when you create a defer. You can get the instance of promise object by defer.promise. It is used to getting the result of the defer when a promise has completed. There are three events where you can bind your listeners.<\/div>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">then(successCallback, errorCallback, notifyCallback)<\/span>&#8211; The Regardless promise is resolved or rejected, it calls one of the success or error callback. Notification callback may be called zero or more than one time.<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">catch(errorCallback)<\/span>&#8211; This is the shorthand for the promise.then(null, errorCallback) where success callback is not given.<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">finally(callback, notifyCallback)<\/span>&#8211; This allows you to watch every single event of a promise. The callback is called once when either promise is resolved or rejected.<\/li>\n<\/ul>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar promise = getTodoList();<br \/>\npromise.then(function (data) {<br \/>\n    that.list = data;<br \/>\n    that.isVisible = true;<br \/>\n    that.status = &#8216;DONE&#8217;;<br \/>\n}, function (error \/*Error event should handle here*\/) {<\/p>\n<p>}, function (data \/*Notify event should handle here*\/) {<br \/>\n    that.status = &#8216;PENDING&#8217;;<br \/>\n    that.percentage = data.percentage;<br \/>\n})<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3 id=\"other-services\" style=\"text-align: center;\">8. $http &amp; $resource<\/h3>\n<p><span style=\"color: #800000;\">$http<\/span> and <span style=\"color: #800000;\">$resource<\/span> are some of a good example of promise based services. Both these services support promise design patterns. Here using these module\/services you can perform your ajax needs.<\/p>\n<p>Since <span style=\"color: #800000;\">$http<\/span> is an abstraction over $q, it has different callbacks. Instead of .then and .catch, it&#8217;s .success and .error and the arguments you get are different.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n$http.get(&#8216;https:\/\/api.github.com\/users\/deepakshrma\/gists&#8217;)<br \/>\n    .then(function (response) {<br \/>\n        $scope.gists = response.data;<br \/>\n    })<br \/>\n    .catch(function (response) {<br \/>\n        console.error(&#8216;Gists error&#8217;, response.status, response.data);<br \/>\n    })<br \/>\n    .finally(function () {<br \/>\n        console.log(&quot;finally finished gists&quot;);<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<p>Similarly, <span style=\"color: #800000;\">$resource<\/span> service returns a promise. It can be retrieve by simply $resource.get(&#8216;somedata&#8217;).$promise.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar commentPromise = CommentApi.update({id: comment._id}, comment);<br \/>\ncommentPromise.$promise.then(function () {<br \/>\n    $scope.alerts.addAlert(&quot;Successfully updated approval status!&quot;, &quot;success&quot;);<br \/>\n}, function () {<br \/>\n    $scope.alerts.addAlert(&quot;Something went wrong. Please try again.&quot;, &quot;danger&quot;);<br \/>\n});<br \/>\n\/\/Here in above CommentApi is a resource service<\/p>\n<p>angular.module(&#8216;myapp&#8217;)<br \/>\n    .factory(&#8216;CommentApi&#8217;, function ($resource) {<br \/>\n        return $resource(&#8216;\/v1\/api\/comments\/:id\/:controller&#8217;, {<br \/>\n                id: &#8216;@_id&#8217;<br \/>\n            },<br \/>\n            {<br \/>\n                update: {<br \/>\n                    method: &#8216;POST&#8217;<br \/>\n                },<br \/>\n                list: {<br \/>\n                    method: &#8216;GET&#8217;<br \/>\n                }<br \/>\n            });<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<h3 id=\"other-features\" style=\"text-align: center;\">9. Some other useful features- $q.all()<\/h3>\n<p><span style=\"color: #800000;\">$q.all()<\/span> is one of the method that i use more frequently. $q.all accepts array of promises as argument. Once all of the promises get completed. you will get the result in callback function as array of results.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar promise1 = $http({method: &#8216;GET&#8217;, url: &#8216;\/api-one-url&#8217;, cache: &#8216;true&#8217;});<br \/>\nvar promise2 = $http({method: &#8216;GET&#8217;, url: &#8216;\/api-two-url&#8217;, cache: &#8216;true&#8217;});<\/p>\n<p>$q.all([promise1, promise2])<br \/>\n    .then(function(data){<br \/>\n        console.log(data[0], data[1]);<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<p><a class=\"btn btn-primary btn-lg\" href=\"#top-of-page\">Scroll Top<\/a><\/p>\n<p><span style=\"font-size: 20px; color: blue;\">Read Further on AngularJS Series<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-a-write-less-do-more-javascript-framework\/\">AngularJS :\u00a0A \u201cWrite Less Do More\u201d JavaScript Framework<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-updating-a-label-dynamically-with-user-input\/\">AngularJS :\u00a0Updating a Label Dynamically with User Input<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-adding-items-to-a-javascript-list-and-updating-corresponding-dom-dynamically\/\">AngularJS :\u00a0Adding Items to a JavaScript List and updating corresponding DOM Dynamically<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-text-suggestions\/\">AngularJS :\u00a0Text Suggestions<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-sorting-objects-on-various-attributes\/\">AngularJS :\u00a0Sorting objects on various attributes<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-fetching-data-from-the-server\/\">AngularJS :\u00a0Fetching data from the server<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-multiple-views-layout-template-and-routing\/\">AngularJS :\u00a0Multiple Views, Layout\u00a0Template\u00a0and Routing<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/angularjs-implementing-routes-and-multiple-views\/\">AngularJS :\u00a0Implementing Routes And Multiple Views<\/a><\/li>\n<li><a href=\"https:\/\/2thenew.xyz\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">Building Intuitive Frontend Interfaces with AngularJS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS Deferred &amp; Promises-\u00a0Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A\u00a0Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to [&hellip;]<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":261,"footnotes":""},"categories":[1439,3429],"tags":[1839,1841,1842,3955,955,4697,1843,1844,1840,1157,1836,495],"class_list":["post-20560","post","type-post","status-publish","format-standard","hentry","category-angular","category-front-end-development","tag-q","tag-q-all","tag-q-defer","tag-angular-development","tag-angularjs","tag-angularjs-development-company","tag-callback","tag-callback-hell","tag-deferred","tag-http","tag-promise","tag-resource"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"AngularJS Deferred &amp; Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Deepak Vishwakarma\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"AngularJS Deferred &amp; Promises- Basic Understanding | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"AngularJS Deferred &amp; Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"AngularJS Deferred &amp; Promises- Basic Understanding | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"AngularJS Deferred &amp; Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#article\",\"name\":\"AngularJS Deferred & Promises- Basic Understanding | TO THE NEW Blog\",\"headline\":\"AngularJS Deferred &amp; Promises- Basic Understanding\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/deepak-vishwakarma\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"datePublished\":\"2015-06-04T02:18:05+05:30\",\"dateModified\":\"2017-08-03T14:17:09+05:30\",\"inLanguage\":\"en-US\",\"commentCount\":6,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#webpage\"},\"articleSection\":\"AngularJS, Front End Development, $q, $q.all, $q.defer, angular development, AngularJS, AngularJS Development Company, callback, Callback Hell, Deferred, http, promise, resource\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/angular\\\/#listItem\",\"name\":\"AngularJS\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/angular\\\/#listItem\",\"position\":2,\"name\":\"AngularJS\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/angular\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#listItem\",\"name\":\"AngularJS Deferred &amp; Promises- Basic Understanding\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#listItem\",\"position\":3,\"name\":\"AngularJS Deferred &amp; Promises- Basic Understanding\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/angular\\\/#listItem\",\"name\":\"AngularJS\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/deepak-vishwakarma\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/deepak-vishwakarma\\\/\",\"name\":\"Deepak Vishwakarma\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f6c1a6068be5d1c588af0a6c8cae06a1d3d1e4c5d74c77ba6043a760552f60df?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Deepak Vishwakarma\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/\",\"name\":\"AngularJS Deferred & Promises- Basic Understanding | TO THE NEW Blog\",\"description\":\"AngularJS Deferred & Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/angularjs-deferred-promises-basic-understanding\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/deepak-vishwakarma\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/deepak-vishwakarma\\\/#author\"},\"datePublished\":\"2015-06-04T02:18:05+05:30\",\"dateModified\":\"2017-08-03T14:17:09+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"AngularJS Deferred & Promises- Basic Understanding | TO THE NEW Blog","description":"AngularJS Deferred & Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to","canonical_url":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#article","name":"AngularJS Deferred & Promises- Basic Understanding | TO THE NEW Blog","headline":"AngularJS Deferred &amp; Promises- Basic Understanding","author":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/deepak-vishwakarma\/#author"},"publisher":{"@id":"https:\/\/2thenew.xyz\/blog\/#organization"},"datePublished":"2015-06-04T02:18:05+05:30","dateModified":"2017-08-03T14:17:09+05:30","inLanguage":"en-US","commentCount":6,"mainEntityOfPage":{"@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#webpage"},"isPartOf":{"@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#webpage"},"articleSection":"AngularJS, Front End Development, $q, $q.all, $q.defer, angular development, AngularJS, AngularJS Development Company, callback, Callback Hell, Deferred, http, promise, resource"},{"@type":"BreadcrumbList","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog#listItem","position":1,"name":"Home","item":"https:\/\/2thenew.xyz\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/angular\/#listItem","name":"AngularJS"}},{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/angular\/#listItem","position":2,"name":"AngularJS","item":"https:\/\/2thenew.xyz\/blog\/category\/angular\/","nextItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#listItem","name":"AngularJS Deferred &amp; Promises- Basic Understanding"},"previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#listItem","position":3,"name":"AngularJS Deferred &amp; Promises- Basic Understanding","previousItem":{"@type":"ListItem","@id":"https:\/\/2thenew.xyz\/blog\/category\/angular\/#listItem","name":"AngularJS"}}]},{"@type":"Organization","@id":"https:\/\/2thenew.xyz\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/2thenew.xyz\/blog\/"},{"@type":"Person","@id":"https:\/\/2thenew.xyz\/blog\/author\/deepak-vishwakarma\/#author","url":"https:\/\/2thenew.xyz\/blog\/author\/deepak-vishwakarma\/","name":"Deepak Vishwakarma","image":{"@type":"ImageObject","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/f6c1a6068be5d1c588af0a6c8cae06a1d3d1e4c5d74c77ba6043a760552f60df?s=96&d=mm&r=g","width":96,"height":96,"caption":"Deepak Vishwakarma"}},{"@type":"WebPage","@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#webpage","url":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/","name":"AngularJS Deferred & Promises- Basic Understanding | TO THE NEW Blog","description":"AngularJS Deferred & Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/2thenew.xyz\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/#breadcrumblist"},"author":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/deepak-vishwakarma\/#author"},"creator":{"@id":"https:\/\/2thenew.xyz\/blog\/author\/deepak-vishwakarma\/#author"},"datePublished":"2015-06-04T02:18:05+05:30","dateModified":"2017-08-03T14:17:09+05:30"},{"@type":"WebSite","@id":"https:\/\/2thenew.xyz\/blog\/#website","url":"https:\/\/2thenew.xyz\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/2thenew.xyz\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"AngularJS Deferred &amp; Promises- Basic Understanding | TO THE NEW Blog","og:description":"AngularJS Deferred &amp; Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to","og:url":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/","og:image":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"AngularJS Deferred &amp; Promises- Basic Understanding | TO THE NEW Blog","twitter:description":"AngularJS Deferred &amp; Promises- Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to","twitter:image":"https:\/\/2thenew.xyz\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"20560","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":"","og_description":"","og_object_type":"blog","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":"","og_article_tags":"","twitter_use_og":false,"twitter_card":"summary","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2021-04-29 12:56:19","updated":"2024-02-29 08:29:10","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.xyz\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/2thenew.xyz\/blog\/category\/angular\/\" title=\"AngularJS\">AngularJS<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tAngularJS Deferred &amp; Promises- Basic Understanding\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/2thenew.xyz\/blog"},{"label":"AngularJS","link":"https:\/\/2thenew.xyz\/blog\/category\/angular\/"},{"label":"AngularJS Deferred &amp; Promises- Basic Understanding","link":"https:\/\/2thenew.xyz\/blog\/angularjs-deferred-promises-basic-understanding\/"}],"_links":{"self":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts\/20560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/comments?post=20560"}],"version-history":[{"count":0,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/posts\/20560\/revisions"}],"wp:attachment":[{"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/media?parent=20560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/categories?post=20560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2thenew.xyz\/blog\/wp-json\/wp\/v2\/tags?post=20560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}