如何使用Angularjs承诺正确获取变量

时间:2015-06-08 19:25:10

标签: javascript angularjs angular-promise

我无法弄清楚这个问题。我的问题是为什么我无法解决回复。我不能在我的控制器中使用响应。但我得到6个回复为空。请打开控制台并按下谷歌地图下的“获取结果”按钮。你会看到未定义的数组。

这里是plunker

 getGoogleDirection.getData(response,$scope.mymap).then(function(res){
                console.log(res); // **it returns undefined elements**
            });

这是服务。

    App.factory('setData',function($q){
    return {
        getData:function(array){
            var deferred = $q.defer();
            var newArray = [];
            angular.forEach(array,function(firstBlocks,key){
                var dummy = firstBlocks.chunk(9);
                angular.forEach(dummy,function(last,key2){
                    if(key2!=0){
                        dummy[key2].unshift(dummy[key2-1][dummy[key2-1].length-1]);
                    }
                });
                newArray.push(dummy);
            });
            deferred.resolve(newArray);
            return deferred.promise;
        }
    };
}); 
App.factory('getGoogleDirection',function($q){
    return {
        getData:function(array,mymap){
            var distances = [];
            var promises = []
            angular.forEach(array,function(object,key){
                angular.forEach(object,function(array2,key2){
                    promises.push(getDirection(array2));
                });
            });
            function getDirection(array){
                var wayPoints = [];
                var start = array[0];
                var finish = array[array.length-1];
                array.pop();
                array.shift();
                angular.forEach(array,function(item,key){
                    wayPoints.push({
                        location:new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lng)),
                        stopover:true
                    });
                });
                calcRoute(new google.maps.LatLng(parseFloat(start.lat),parseFloat(start.lng)), wayPoints, new google.maps.LatLng(parseFloat(finish.lat),parseFloat(finish.lng)));
            }
            function calcRoute(start,waypoints,end) {
                var directionsDisplay;
                var directionsService = new google.maps.DirectionsService();
                directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(mymap);
                    var request = {
                        origin:start,
                        destination:end,
                        waypoints:waypoints,
                        optimizeWaypoints: false,
                        travelMode: google.maps.TravelMode.DRIVING,
                        avoidHighways:false,
                        avoidTolls:false
                    };
                var deferred = $q.defer();
                return directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        deferred.resolve(response);
                    }else{
                        deferred.reject(response);
                        alert('Error');
                    }
                    return deferred.promise;
                });
            }
            return $q.all(promises).then(function(res){
                return res;
            });
        }
    }
});

2 个答案:

答案 0 :(得分:2)

当promise被解析时,它在其回调函数中提供已解析的数据。在您的代码中,您没有使用它。

更改此段代码

              var dist = [];
              angular.forEach(data, function (d) {
                if (d) dist.push(d);
              });
              console.log(dist);
              return dist;

看看这里 http://plnkr.co/edit/dmlhpWKUxL7CLb1ej8FV?p=preview

答案 1 :(得分:2)

所有承诺完成后,

$q.all(promises)结束,但promises数组根本不包含承诺。 promises数组的内容是directionsService.route的返回值,它不是一个promise。当你给$ q一个非承诺解决它就像一个解析为相同值的承诺。例如:

      $q.when(1).then(function(x) {
        alert(x);
      });

警告'1',即使1不是承诺。

所以你需要做的是返回一个在路由回调status == google.maps.DirectionsStatus.OK时解析的承诺。如果您的承诺得到妥善解决,您可以使用距离。

然而,用远距离来解决你的承诺要好得多,所以最终结果会是这样的:

var result = $q.deferred();
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var distances = [];
        angular.forEach(response.routes[0].legs,function(leg){
              distances.push(leg.distance.value);
          });
        directionsDisplay.setDirections(response); // 
        result.resolve(distances);
    }else{
        result.reject('Google dan veri alımında hata yaşandı');
    }
});
return result.promise;

然后您可以像这样使用它:$q.all(promises).then(function(allDistances) { ... },其中allDistances是距离的2d数组,而第一个索引对应于路线,第二个索引对应于腿。