javascript 在服务/工厂中使用 $http.get 返回集合

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33445851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 16:29:36  来源:igfitidea点击:

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

javascriptangularjsangular-promiseangularjs-factoryangularjs-http

提问by Serge

I try to use a http.getpromise in an angularjs service, do some manipulation on the obtained collection and finally return it to a controller...

我尝试http.get在 angularjs 服务中使用承诺,对获得的集合进行一些操作,最后将其返回给控制器......

My question is how to use a $http.get()in a service in order to obtain and manipulate the result beforereturning it to the controller, like in the code bellow : The PEN code

我的问题是如何$http.get()在服务中使用 a以便在将结果返回给控制器之前获取和操作结果,就像下面的代码一样: PEN 代码

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>

回答by Pankaj Parkar

Basically you could modified the data inside the ajax success call & then return that data from the success. But for returning data from ajax success you need to use promise pattern to return out data from $http.get. you need to return the object from the $http.getpromise, & inside .thenfunction of $http.getyou could manipulate data.

基本上,您可以修改 ajax 成功调用中的数据,然后从成功中返回该数据。但是要从 ajax 成功返回数据,您需要使用承诺模式从$http.get. 您需要从$http.get承诺中返回对象,并且您的内部.then函数$http.get可以操作数据。

Factory

工厂

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 
    };
}]);

Controller

控制器

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

回答by Constantine Poltyrev

I took the liberty to modify your code to return a promise from the factory, so you can set the value as soon as the promise is resolved.

我冒昧地修改了您的代码以从工厂返回承诺,因此您可以在承诺解决后立即设置该值。

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>