angularjs - 使用 $http 和 $q 获取数据

Question

我正在尝试使用 $q 和 $http 从服务器获取数据并等待数据被检索。检索到数据后，我想对其进行操作。

这是我的服务，其方法是从服务器获取数据:

application
.factory('service', function ($http,$q) {
  return { 
     fetch: function(url) {
         var deferred = $q.defer();
         $http.get(url).success(function(data){             
             deferred.resolve(data);
         }).error(function(){               
           deferred.reject("An error occured while fetching items");
         });    
         return deferred.promise;
      }        
  };
}); 

消费数据的 Controller 如下所示:

service.fetch(url).then(function(data){
  $scope.data = data;
  },
function(errorMessage){
  $scope.error=errorMessage;
});
$scope.data = ...manipulate data

问题是 Angular 在获取数据之前会对其进行操作。任何解决此问题的建议将不胜感激。

Answer 1

如果您需要从服务调用中操作数据，一个不错的选择是使用 transformResponse option在 $http 服务中。它基本上允许您在解决 promise 之前完全弄乱响应。

有关演练，请观看此视频。 https://egghead.io/lessons/angularjs-transformresponse

这是一个示例转换函数。

app.factory('searchResponseTransformer', function () {
    return function (data) {
        data = JSON.parse(data);
        if (data.length) {
            // Do data manipulation here
        }
        return data;
    };
});

然后您可以在您的服务中使用此转换功能。

app.factory('searchService', function ($http, searchResponseTransformer) {
  return { 
    search: function(searchTerm) {
      return $http({
        method: "GET",
        url: "/search",
        params: { q: searchTerm },
        transformResponse: searchResponseTransformer
      });
    }
  }        
}); 

然后你可以从你的 Controller 使用这个服务。

app.controller('searchCtrl', function ($scope, searchService) {
  $scope.searchTerm = "";
  $scope.searchResults = [];

  $scope.search = function() {
    searchService
      .search($scope.searchTerm)
      .success(function(data) {
        $scope.searchResults = data;
      });
  }
}); 

你的 View 看起来像这样..

<div ng-controller="searchCtrl">
  <p><input type="text" ng-model="searchTerm" ></p>
  <ul>
    <li ng-repeat="item in searchResults">{{item.description}}</li>
  </ul>
</div>