Make function wait for $http response in AngularJS

Question

I have a method seatClicked() that calls getUserID() to get the user id corresponding to the session atribute 'user'. There is a table that contains the username and user id(unique). The following is the definition of seatClicked()

$scope.seatClicked = function() {
    promise = $scope.getUserID();
    promise.then(function(results){
        $scope.seatID.userID = results; // store the user id in $scope.seatID.userID
    });
}

This is the definition for getUserID()

$scope.getUserID = function() {
    var deferred = $q.defer();
    $http({
        method : 'POST',
        url : 'http://localhost:8080/AirlineApp/getUserID',
        headers : {
            'Content-Type' : 'application/json'
        }
    }).then(function(data){
        alert("userID:"+data)
         deferred.resolve(data);
    })
    return deferred.promise;
};

The variable 'results' returned by $http.then() is always undefined, whereas if I use $http.success() I am able to retrieve the user id.

I want to fetch the user id before further processing. Is there any way for the function to wait till the data is fetched from the database? P.S. I tried callback as well, no luck.

Edit: I am able to fetch the id and store it (thanks all), but it takes much longer than the time taken to execute my next operation(not presented here). Can I stall that operation till I am assured of the id?

About your edit, yes you can chain the promises like this your are sure to retrieve your id first then make an other request with this ID: service.getItemId().then(function(id){ <call an other service with the id> }) — FlavienBert
– FlavienBert, Commented Jun 17, 2015 at 11:40

Dmitri Algazin · Accepted Answer · 2015-06-17 10:31:39Z

4

what we did in our project, added PromiseUtils service for any REST calls

.service("PromiseUtils", function($q) {
    return {
        getPromiseHttpResult: function (httpPromise) {
            var deferred = $q.defer();
            httpPromise.success(function (data) {
                deferred.resolve(data);
            }).error(function () {
                deferred.reject(arguments);
            });
            return deferred.promise;
        }
    }
})

and use it nice and easy

var anyCall  = $http({
        method: 'POST',
        url: 'http://localhost:8080/AirlineApp/getUserID',
        headers: {
            'Content-Type': 'application/json'
        }
    });

PromiseUtils.getPromiseHttpResult(anyCall).then(function(result){
   console.log("result", result);
})

or

PromiseUtils.getPromiseHttpResult($http.get('/api/get/call'))
.then(function(result){
    console.log("result", result);
})

PromiseUtils.getPromiseHttpResult($http.post('/api/post/call', data))
.then(function(result){
   console.log("result", result);
})

if you need error() function, just add as second parameter

PromiseUtils.getPromiseHttpResult($http.get('/api/get/call'))
.then(function(result){
    console.log("result", result);
}, function (arguments) {
    console.log("fail", arguments);         
})

answered Jun 17, 2015 at 10:31

Dmitri Algazin

3,4541 gold badge33 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sai Over a year ago

Hi Dmitri, thanks for your reply. Currently I am not using any REST services. I am learning angularjs and using servlets at the backend. Can you please give the solution in a simpler manner? Thanks

Dmitri Algazin Over a year ago

watch AngularJS video lessons, on you-tube or any other source. this is my solution for you :)

Sai Over a year ago

I started learning it from PluralSight videos. Thank you for the suggestion :) Are there any tutorials or lessons that focus on the advanced aspects (or at least above the basics)?

Sai Over a year ago

I am able to fetch the id and store it, but it takes much longer than the time taken to execute my next operation(not presented here). Can I stall that operation till I am assured of the id?

Dmitri Algazin Over a year ago

search for $q.all() examples

|

FlavienBert · Accepted Answer · 2015-06-17 10:28:45Z

0

$http returns a special promise different from the standard promise like here https://github.com/promises-aplus/promises-spec

If you use $http you need to retrieve your data like this :

$http
  .success(success) 
  .error(error) ...

But you can use standard promise by wrapping the $http promise in your service using $q like this :

var defer = $q.defer();
var http = $http({
    url: SharedFactory.endPoint + '/stats',
    method: 'GET',
    params: params
});

http.success(function(stats) {
      defer.resolve(stats);
    })
    .error(function() {
      defer.reject("Failed to get stats");
    });

  return defer.promise;

answered Jun 17, 2015 at 10:28

FlavienBert

1,6844 gold badges16 silver badges17 bronze badges

1 Comment

Sai Over a year ago

Hi FlavienBert, I tried the standard promise too, just now. When I alert the result(stats in your code), it displays undefined :(

Collectives™ on Stack Overflow

Make function wait for $http response in AngularJS

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related