在angularjs中同步多个$ http响应

时间:2017-01-22 02:14:49

标签: javascript angularjs

我只需要调用API来获取用户地址的响应,并对应每个地址,我必须调用google API来获取经度和纬度。
我已经尝试了太多和所有方法,但最后我仍然看着我的空手 请帮我弄清楚我错在哪里。

app.controller('myController', function($scope, $rootScope, $http,$q){

$scope.myGeoKey="AIzaSyCqoOf_Kx5wzrYh3ioxFQ_xyz";

// FIRST API REQUEST
var url="http://xyz/abc?origin=noida";
$http.get(url, {
        headers:{'Content-Type': 'application/json'}
}).
then(function(data, status, headers, config) {

    // response is like
    /*
       [
            {
                "address":"Sector 64, Noida",
                "state": "Uttar Pradesh"
            },
            {
                "address":"Sector 62, Noida",
                "state": "Uttar Pradesh"
            },
            {
                "address":"CP, New Delhi",
                "state": "Delhi"
            }
        ]
    */

    var synchronizeData = [];
    var asynchronizeData = [];

    for (var key in data.data.response){

        var rawAddress=data.data.response[key].address+", "+data.data.response[key].state;
        var geoUrl="?address="+rawAddress+"&key="+$scope.myGeoKey;

        // GET LATITUDE AND LONGITUDE FOR EACH API RESPONSE

        $http.get("https://maps.googleapis.com/maps/api/geocode/json"+geoUrl).
        then(function(data, status, headers, config) {

            if(data.data.status=="OK") {
                var geometry=data.data.results[0].geometry.location;

                var latlng={
                    "lat": geometry.lat,
                    "long": geometry.lng
                }
                asynchronizeData.push(latlng);
            }

        });
    }

    // console.log(asynchronizeData) // WORKING TILL HERE

    $q.all(asynchronizeData).then(function(response){

        // console.log(response) // THIS IS NOT WORKING

        for (var i=0,len = response.length;i<len;++i){
            synchronizeData.push(response[i]);
        }
        $scope.synchronized = synchronizeData;

        console.log($scope.synchronized); // FINAL OUTPUT NOT WORKING

    });
});
});

请... .. 感谢

1 个答案:

答案 0 :(得分:0)

.all()需要将promises数组作为param(或promises的哈希)。 并传递一组文字对象!

阅读有关$ q

的文档

我真的不确定,但是,尝试在asyncArray中推送所有第二个http调用(循环调用)。 然后告诉我们你的.all()函数会发生什么。

因为每个$ http都会返回一个promise,所以你在数组中堆叠promises,所以你可以.all()。