Multiple HTTP requests in Angular

Question

So this my controller:

app.controller('dbCtrl', function($scope, $http) {
$http.get("http://private-abc.apiary-mock.com/bus")
.success(function(response) {
 $scope.network = response.networkupdates;});
 });

What I wanted to do next is call a 2nd HTTP request, I guess in terms of best practice would it be best to create a 2nd controller to call the 2nd HTTP or would it be best to include the 2nd HTTP call in this current controller (and if so, how?) Thanks.

possible duplicate of [How to chain Angular $http.get() calls?](http://stackoverflow.com/questions/15726377/how-to-chain-angular-http-get-calls) — Claies, Jul 16 '15 at 01:30
Not really necessary to create another controller but we don't know the extent of your app either . — charlietfl, Jul 16 '15 at 01:31

kanzelm3 · Accepted Answer · 2015-07-16T01:36:35.180

So one of the cool aspects of using promises is that they can be chained. So in your case, you are calling:

$http.get("http://private-abc.apiary-mock.com/bus")

Which returns a promise that you can then chain to another promise like so:

var requests = $http.get("http://private-abc.apiary-mock.com/bus").then(function(response) {
    $scope.network = response.networkupdates;
    // make second get call and return it to chain the promises
    return $http.get("some-other-endpoint").then(function(otherResponse) {
        // you can do something here with the response data
        return otherResponse;
    });
});

What you have now is two chained promises that will return the final value, so if you call this later:

requests.then(function(otherResponse) {
    // or you can do something here
    doSomething(otherResponse);
});

As far as best practices for Angular, I would say you are better off creating a service or factory to handle any and all http requests. Controllers are really just meant to bind data to the view; services are where your business logic and data population should happen.

not even clear that the calls are related to each other and even need to be chained — charlietfl, Jul 16 '15 at 01:34

score 0 · Answer 2 · answered Jul 16 '15 at 01:52

You can make your $http calls in the same controller.

The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: success and error. It internally uses $q (a promise/deferred implementation inspired by Kris Kowal's Q).

If your two $http are independent of each other you use the $q.all to "join" the results of your http calls.

Example :

$q.all([
    $http.get("http://private-abc.apiary-mock.com/bus"),
    $http.get('/someUrl')
  ]).then(function(results) {
     $scope.network = results[0];
     $scope.whatevername= results[1]

  });
}

If your http calls are dependent on one another then you can use the concept of chaining.

for example:

$http.get("http://private-abc.apiary-mock.com/bus").then(function(result) {
    $scope.network = result.networkupdates;    
    return $http.get("someurl").then(function(res) {        
        return res;
    });
});

For refernce of q you can see https://github.com/kriskowal/q

For refernce of $q service you can see https://docs.angularjs.org/api/ng/service/$q

Multiple HTTP requests in Angular

2 Answers2