在 service/factory 到 return 集合中使用 $http.get

Question

我尝试在 angularjs 服务中使用 http.get promise，对获得的集合进行一些操作，最后 return 将其发送给控制器...

我的问题是如何在服务中使用 $http.get() 以便在 return 将其发送到控制器之前获取和操作结果，就像在下面的代码中一样： The PEN code

var app = angular.module('myApp', []);

app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
  $scope.odds = customer.odds;
}]);

app.factory('customer', ['$http', function($http) {
  var all = [{'Id':88, 'Name':"A"}, {'Id':89, 'Name':"ShoutNotBeHere"}]; 
  var odds = [];

  $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function(response) {
      all = response.records;
    });

  angular.forEach(all, function(c, i) {
    if (i % 2 == 1) {
      odds.push(c);
    }
  });

  return {odds: odds};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    Odd ids from www.w3schools.com/angular/customers.php
    <ul>
      <li ng-repeat="c in odds">
        {{ c.Id + ', ' + c.Name }}
      </li>
    </ul>
  </div>
</body>

Answer 1

基本上您可以修改 ajax 成功调用中的数据，然后 return 来自成功的数据。但是为了 return 从 ajax 成功获取数据，您需要使用承诺模式 return 从 $http.get 输出数据。您需要 return 来自 $http.get promise 的对象，并且在 $http.get 的 .then 函数中您可以操作数据。

工厂

app.factory('customer', ['$http', function($http) {
    var all, odds = [];
    var getData = function() {
        return $http.get("http://www.w3schools.com/angular/customers.php")
        .then(function(response) {
          all = response.records;
          angular.forEach(all, function(c, i) {
            if (i % 2 == 1) {
              odds.push(c);
            }
          });
          return odds
        });
    }
    return {
        getData: getData 
    };
}]);

控制器

app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
    customer.getData().then(function(response){
         $scope.odds = response;
    });
}]);

Answer 2

我冒昧地将你的代码修改为return工厂的承诺，这样你就可以在承诺解决后立即设置值。

var app = angular.module('myApp', []);

app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
  customer.then(function(data){
    $scope.odds = data.odds;
    customer.then(function(data){
      console.log(data);
    });
  });
}]);

app.factory('customer', ['$http', function($http) {
  var all = [{'Id':88, 'Name':"A"}, {'Id':89, 'Name':"ShoutNotBeHere"}]; 
  var odds = [];
  return $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function(response) {
      all = response.data.records;
      angular.forEach(all, function(c, i) {
      if (i % 2 == 1) {
        c.Id = i;
        odds.push(c);
      }
    });
    return {odds: odds};
  });
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    Odd ids from www.w3schools.com/angular/customers.php
    <ul>
      <li ng-repeat="c in odds">
        {{ c.Id + ', ' + c.Name }}
      </li>
    </ul>
  </div>
</body>

在 service/factory 到 return 集合中使用 $http.get

use $http.get in a service/factory to return a collection

javascript

angularjs

angular-promise

angularjs-factory

angularjs-http