Question

根据AngularJS，我的$http来自我的控制器的服务调用是否返回undefined？

这里似乎有什么问题？我试图返回被调用的数据，但一旦传递给控制器，数据就变得不确定了？

的JavaScript

var myStore = angular.module('myStore', [])

    .controller('StoreController', ['$scope', 'dataService', function ($scope,  dataService) {
      $scope.products = dataService.getData();
    }])

    .service('dataService', ['$http', function($http) {
      this.getData = function() {
        $http.get('assets/scripts/data/products.json')
              .then(function(data) {
                return data;
              });
      };
    }]);

HTML

<div class="content">
  <ul>
    <li ng-repeat="product in products.products">{{product.productName}}</li>
  </ul>
</div>

我知道$http，$q和$resource都会返回承诺，但我认为我已经用.then覆盖了它。

Answer 1

问题可能是您没有return $http.get dataService.getData功能中undefined创建的承诺。换句话说，您可以通过更改内容来解决.service('dataService', ['$http', function($http) { this.getData = function() { return $http.get... }; }问题：

$http.get

如果您在dataService.getData内有多次.service('dataService', ['$http', function($http) { this.getData = function() { var combinedData, promise; combinedData = {}; promise = $http.get(<resource1>); promise.then(function (data1) { combinedData['resource1Response'] = data1; return $http.get(<resource2>); }); return promise.then(function (data2) { combinedData['resource2Response'] = data2; return combinedData; }); }; }]);来电，请按以下方式处理。

.service('dataService', ['$http', '$q', function($http, $q) {
    this.getData = function() {
        var combinedData, promises;
        combinedData = {};
        promises = $q.all([
            $http.get(<resource1>),
            $http.get(<resource2>)
        ]);
        return promises.then(function (allData) {
            console.log('resource1 response', allData[0]);
            console.log('resource2 response', allData[1]);
            return allData;
        });
    };
}]);

然而，更简洁的方法是使用$q.all

{{1}}

Answer 2

你的问题确实在于你没有回复承诺，但正如你在@ maxenglander的帖子中所述，你可能涉及多个http调用，这意味着你应该开始使用{{3}创建和解决你自己的承诺}：

.service('dataService', ['$http', '$q', function($http, $q) {
      return $http.get('assets/scripts/data/products.json')
          .then(function(data) {
            //possibly do work on data
             return <<mutated data>>;
            });
}];

或者如果您有多个http调用并需要进行一些组合工作，您可以执行某些操作$q：

.service('dataService', ['$http', '$q', function($http, $q) {
      var p1 = $http.get('assets/scripts/data/products.json');
      var p2 = $http.get('assets/scripts/data/products2.json');
      return $q.all([p1, p2]).then(function(result){
         //do some logic with p1 and p2's result
         return <<p1&p2s result>>;
       });
}];

然后在你的控制器中你需要做：

.controller('StoreController', ['$scope', 'dataService', function ($scope,  dataService) {
     dataService.getData().then(function(result){
         $scope.products = result;
     });
}]);

现在你可以在服务中执行复杂的调用，例如在内部调用两个webservices并等到它们都完成然后解决这个承诺。我在这里要表达的是，您不需要返回$ http.get函数提供的承诺，但是由于您正在执行异步操作，因此 DO 需要返回一些承诺这将在以后完成并采取行动。

AngularJS $ http返回undefined？

2 个答案: