How to wait till the response comes from the $http request, in angularjs?

by

You should use promises for async operations where you don’t know when it will be completed. A promise “represents an operation that hasn’t completed yet, but is expected in the future.” (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)

An example implementation would be like:

myApp.factory('myService', function($http) {

    var getData = function() {

        // Angular $http() and then() both return promises themselves 
        return $http({method:"GET", url:"/my/url"}).then(function(result){

            // What we return here is the data that will be accessible 
            // to us after the promise resolves
            return result.data;
        });
    };


    return { getData: getData };
});


function myFunction($scope, myService) {
    var myDataPromise = myService.getData();
    myDataPromise.then(function(result) {  

       // this is only run after getData() resolves
       $scope.data = result;
       console.log("data.name"+$scope.data.name);
    });
}

Edit: Regarding Sujoys comment that
What do I need to do so that myFuction() call won’t return till .then() function finishes execution. 

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
         $scope.data = result; 
         console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
 }

Well, let’s suppose the call to getData() took 10 seconds to complete. If the function didn’t return anything in that time, it would effectively become normal synchronous code and would hang the browser until it completed.

With the promise returning instantly though, the browser is free to continue on with other code in the meantime. Once the promise resolves/fails, the then() call is triggered. So it makes much more sense this way, even if it might make the flow of your code a bit more complex (complexity is a common problem of async/parallel programming in general after all!)

More Related Contents:

  1. AngularJS: Service vs provider vs factory
  2. Is this a “Deferred Antipattern”?
  3. Cordova + Angularjs + Device Ready
  4. How can I test an AngularJS service from the console?
  5. AngularJS : When to use service instead of factory
  6. AngularJS : The correct way of binding to a service properties
  7. AngularJS Service Passing Data Between Controllers
  8. angular.service vs angular.factory
  9. How to add custom validation to an AngularJS form?
  10. Link vs compile vs controller
  11. Angular.js directive dynamic templateURL
  12. Using protractor with loops
  13. Angularjs $q.all
  14. passing 2 $index values within nested ng-repeat
  15. Should I use `this` or `$scope`?
  16. AngularJS $http, CORS and http authentication
  17. Angularjs loading screen on ajax request
  18. AngularJS UI Router – change url without reloading state
  19. Reading response headers when using $http of Angularjs
  20. $provide outside config blocks
  21. angular.min.js.map not found, what is it exactly?
  22. AngularJS – difference between pristine/dirty and touched/untouched
  23. Angularjs wrong $index after orderBy
  24. Anchor links in Angularjs?
  25. How/when to use ng-click to call a route?
  26. What’s the best way to cancel event propagation between nested ng-click calls?
  27. Can someone provide an example of a $destroy event for scopes in AngularJS?
  28. angularjs text area character counter
  29. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
  30. scope and controller instantiation with ui router

Leave a Comment