MVC和Angularjs:承诺不等待数据

时间:2016-04-20 08:56:13

标签: angularjs asynchronous promise angular-promise

我刚刚在网上研究过的angularjs,但我找不到任何合适的解决方案来解决我的问题。我做了一个http调用来从控制器获取一些数据。控制器方面没问题。但客户端承诺不等待数据。这是我写的代码;

//service code 
angular.module("myApp").service('$myService', function ($http, $q) {
            this.getDataArray = function () {
                var deferred = $q.defer();
                $http.get('../Home/GetDataArray')
                    .success(function success(response) {
                        deferred.resolve(response);
                    })
                    .error(function () {
                        console.log("error getting data array");
                        deferred.reject();
                    });

                return deferred.promise;
            };
    }

// controller-code
angular.module("myApp").controller('dataController', function ($scope, $http, $myService) {

        $scope.getDataFromService = function () {
            $myService.getDataArray().then(function (response) {
                    $scope.dataArray = response.data;
                });
        };
    });
}

当我首先调用getDataFromService方法时,$ scope.dataArray为空,但第二次调用时,$ scope.dataArray填充了数据。问题出在哪儿?谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

我自己不是一个有角度的专家。这就是我遇到同样问题时的表现。试试这个:

控制器:

angular.module("myApp").controller('dataController',[ '$scope', 'Service1', '$http', function ($scope, Service1, $http) {
    var deferred = Service1.getDataArray().$promise;
            return deferred.then(function successCallback(data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
                $scope.dataArray = response.data;
            }, function errorCallback(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            })
    }])

和服务:

   var service = angular.module("myApp").service('myService', ['ngResource']);
  myService.factory('Service1', ['$resource',
  function ($resource) {
      return $resource('../Home/GetDataArray', {}, {
          get: { method: 'GET', isArray: true },
      });
  }])

这个想法是你的服务不是应该等待返回的服务,你的控制器是。因此,您应该等待控制器中的承诺而不是您的服务。在我的例子中,我正在使用工厂,因为,这就是我在项目中解决这个问题的方法,如果你不想使用工厂,你可以尝试直接实现它。