Multiple service http calls using AngularJS

Question

In my controller I am calling a service with the following code:

Service.updateData(data).then(function (result) {
  console.log(result);
});

In my service I am using $q to get multiple HTTP requests.

$rootScope.http_1 = $http.get();
$rootScope.http_2 = $http.get();

$q.all([$rootScope.http_1, $rootScope.http_2]).then(function(result) {
    console.log(result[0], result[1]);
    return result[0], result[1];
});

The code actually works as the http requests are successfully made. However, I get an error in the controller which says: TypeError: Cannot read property 'then' of undefined. I believe this is due the service not returning the promise in the correct way. Any ideas on how to resolve this would be much appreciated?

What does updateData return? Also I don't see how you'll use the results of then callback function, hence I really can't find any use for return there (and it's written wrongly in any case). Finally, why do you decorate $rootScope with them, and not use local variables instead? — raina77ow
– raina77ow, Commented Nov 22, 2014 at 18:27
It doesn't return anything as I get a JS error. But the HTTP calls do work because I can see the result[0] & result[1] in console from the service. Any idea on how I could adapt the code in the controller to get a return of result[0] result[1] back to the controller? — londonfed
– londonfed, Commented Nov 22, 2014 at 18:35

deitch · Accepted Answer · 2014-11-22 20:13:24Z

1

It looks like you are not returning the promise in updateData Try this:

updateData = function(data) {
    $rootScope.http_1 = $http.get();
    $rootScope.http_2 = $http.get();

    return $q.all([$rootScope.http_1, $rootScope.http_2]);
}

You didn't return the promise, so there is nothing to call .then() on in your controller
You are returning inside the .then() function inside your service.updateData(), which doesn't do very much for you.

If you want to control it all inside the service and return a specific format, try this:

updateData = function(data) {
    $rootScope.http_1 = $http.get();
    $rootScope.http_2 = $http.get();
    var defer = $q.defer();
    $q.all([$rootScope.http_1, $rootScope.http_2]).then(function(result){
       // process here to get the data how you want it, say in some new var foo
       var foo = "some processed data based on result";
       defer.resolve(foo);
    });
    return defer.promise;
}

edited Nov 22, 2014 at 20:13

answered Nov 22, 2014 at 18:34

deitch

14.8k15 gold badges75 silver badges102 bronze badges

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

3 Comments

londonfed Over a year ago

Thanks deitch. I would like to keep it within a service. However, when I use your 2nd bit code along with my code for the controller I get a new error: TypeError: undefined is not a function (and this points to the then on the controller).

londonfed Over a year ago

Adding .promise to the defer got it working. Thanks again return defer.promise;

deitch Over a year ago

Oh, yeah, sloppy of me! And I use return defer.promise all of the time. Sorry. :-)

Collectives™ on Stack Overflow

Multiple service http calls using AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related