How should I handle two asynchronous calls in AngularJS?

Question

I have a controller which loads different attributes of my data via two separate http calls. An overly simplified example would be something like:

A Country class which has attributes name, official language, and population
one service (A) which returns countries and their languages
another service (B) which returns countries and their populations
let's assume that the set of countries returned in B is a subset of the countries returned in A, and I don't know either set ahead of time
I want to end up with an array of Country objects - all countries returned by A, with their populations set (based on the data returned by B)

If the calls were synchronous, I would simply do something like:

- call service A and store Objects in a map keyed by Country name
- call service B, iterate over results:  if a result in is the previous map, then update its population field

But of course I can't do that because the call to service B might return first, so the map is empty.

I have tried using promises via the "$broadcast"/"$on" functionality, but this doesn't work consistently because both calls are asynchronous (I broadcast when B is done, and try to apply the results to A, but sometimes A has not finished yet).

What should I do here?

Just execute the second function in the callback of the first? — tymeJV
– tymeJV, Commented Apr 3, 2014 at 18:08

Alexander Kalinovski · Accepted Answer · 2014-04-03 18:13:20Z

1

Just look at the Chained Promises

answered Apr 3, 2014 at 18:13

Alexander Kalinovski

1,4291 gold badge13 silver badges19 bronze badges

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

1 Comment

jamesmortensen Over a year ago

Just a thought, you should consider editing this to show an example. The video was useful, and it would suck to see this flagged as not an answer and deleted. If that link were to break, an example would ensure it's still useful to future visitors who have the same problem. Hope this helps.

onsy · Accepted Answer · 2014-04-03 18:20:43Z

1

Promises allow developers to easily attach 1x-only notifications of response to any asynchronous request/action. Promises also enable two (2) other very important things. We can:

Transform the responses before subsequent handlers (in the chain) are notified of the response. Use the response to invoke more async requests (which could generate more promises). But even more important than the features above, Promises support easy chaining of custom activity or computations. Managing sequences or chains of asynchronous activity can be a very difficult and complex effort. Promise chains are amazing and provide means to easily build sequences of asynchronous requests or asynchronous activity.

Refer - Flattening Promise Chains

answered Apr 3, 2014 at 18:20

onsy

7605 silver badges11 bronze badges

1 Comment

Alexander Kalinovski Over a year ago

You referred nice article.

KoNaN · Accepted Answer · 2014-04-03 18:44:37Z

1

    var app = angular.module("app",[]);


    app.factory('myService', function($http,$q) {
        return {
            getPerson: function(){

            return $q.all([
                $http.jsonp('http://filltext.com/?callback=JSON_CALLBACK&rows=10&delay=2&fname={firstName}&lname={lastName}'),
                $http.jsonp('http://filltext.com/?callback=JSON_CALLBACK&rows=10&delay=2&fname={firstName}&city={city}')
                ]).then(
                function(result) { return result },  /* SUCCESS */
                function() { return "NaN" } /* FAILURE */
                );
            }
        };
    });

answered Apr 3, 2014 at 18:44

KoNaN

813 bronze badges

Collectives™ on Stack Overflow

How should I handle two asynchronous calls in AngularJS?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related