我应该如何在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?

Answer 1

只是看连锁应许

Answer 2

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

Answer 3

    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 */
                );
            }
        };
    });