在服务中处理 $http 响应

Question

我最近在 SO 上发布了我在here 面临的问题的详细描述。由于我无法发送实际的$http 请求，我使用超时来模拟异步行为。在@Gloopy 的帮助下，从我的模型到视图的数据绑定工作正常

现在，当我使用$http 而不是$timeout（在本地测试）时，我可以看到异步请求成功并且data 在我的服务中填充了json 响应。但是，我的观点没有更新。

更新了 Plunkr here

Answer 1

我遇到了同样的问题，但是当我在网上冲浪时，我了解到 $http 默认返回一个承诺，然后我可以在返回“数据”后将它与“then”一起使用。看代码：

 app.service('myService', function($http) {
       this.getData = function(){
         var myResponseData = $http.get('test.json').then(function (response) {
            console.log(response);.
            return response.data;
          });
         return myResponseData;

       }
});    
 app.controller('MainCtrl', function( myService, $scope) {
      // Call the getData and set the response "data" in your scope.  
      myService.getData.then(function(myReponseData) {
        $scope.data = myReponseData;
      });
 });

Answer 2

请尝试以下代码

可以拆分控制器（PageCtrl）和服务（dataService）

'use strict';
(function () {
    angular.module('myApp')
        .controller('pageContl', ['$scope', 'dataService', PageContl])
        .service('dataService', ['$q', '$http', DataService]);
    function DataService($q, $http){
        this.$q = $q;
        this.$http = $http;
        //... blob blob 
    }
    DataService.prototype = {
        getSearchData: function () {
            var deferred = this.$q.defer(); //initiating promise
            this.$http({
                method: 'POST',//GET
                url: 'test.json',
                headers: { 'Content-Type': 'application/json' }
            }).then(function(result) {
                deferred.resolve(result.data);
            },function (error) {
                deferred.reject(error);
            });
            return deferred.promise;
        },
        getABCDATA: function () {

        }
    };
    function PageContl($scope, dataService) {
        this.$scope = $scope;
        this.dataService = dataService; //injecting service Dependency in ctrl
        this.pageData = {}; //or [];
    }
    PageContl.prototype = {
         searchData: function () {
             var self = this; //we can't access 'this' of parent fn from callback or inner function, that's why assigning in temp variable
             this.dataService.getSearchData().then(function (data) {
                 self.searchData = data;
             });
         }
    }
}());

Answer 3

就在服务中缓存响应而言，这是另一个版本，似乎比我目前看到的更直接：

App.factory('dataStorage', function($http) {
     var dataStorage;//storage for cache

     return (function() {
         // if dataStorage exists returned cached version
        return dataStorage = dataStorage || $http({
      url: 'your.json',
      method: 'GET',
      cache: true
    }).then(function (response) {

              console.log('if storage don\'t exist : ' + response);

              return response;
            });

    })();

});

此服务将返回缓存数据或$http.get；

 dataStorage.then(function(data) {
     $scope.data = data;
 },function(e){
    console.log('err: ' + e);
 });

Answer 4

让它变得简单。就这么简单

1. 在您的服务中返回promise（无需在服务中使用then）
2. 在你的控制器中使用then

演示。 http://plnkr.co/edit/cbdG5p?p=preview

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

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('test.json');  //1. this returns promise
    }
  };
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function(d) { //2. so you can use .then()
    $scope.data = d;
  });
});

Answer 5

我真的不喜欢这样一个事实，因为“承诺”的做事方式，使用 $http 的服务的消费者必须“知道”如何解包响应。

我只是想调用一些东西并取出数据，类似于旧的$scope.items = Data.getData(); 方式，即now deprecated。

我尝试了一段时间并没有想出一个完美的解决方案，但这是我最好的方法 (Plunker)。它可能对某人有用。

app.factory('myService', function($http) {
  var _data;  // cache data rather than promise
  var myService = {};

  myService.getData = function(obj) { 
    if(!_data) {
      $http.get('test.json').then(function(result){
        _data = result.data;
        console.log(_data);  // prove that it executes once
        angular.extend(obj, _data);
      }); 
    } else {  
      angular.extend(obj, _data);
    }
  };

  return myService;
}); 

然后是控制器：

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = Object.create(null);
  };
  $scope.getData = function() {
    $scope.clearData();  // also important: need to prepare input to getData as an object
    myService.getData($scope.data); // **important bit** pass in object you want to augment
  };
});

我已经发现的缺陷是

• 您必须传入要添加数据的对象，这在 Angular 中不是直观或常见的模式
• getData 只能接受对象形式的obj 参数（虽然它也可以接受数组），这对很多应用程序来说都不是问题，但它是一个痛苦的限制
• 您必须准备输入对象$scope.data 和= {} 以使其成为对象（基本上是上面$scope.clearData() 所做的），或= [] 用于数组，否则它将不起作用（我们是已经不得不假设即将到来的数据）。我尝试在getData 中执行此准备步骤，但没有成功。

尽管如此，它提供了一种模式来删除控制器“promise unwrap”样板，并且在您希望在多个地方使用从 $http 获得的某些数据同时保持其 DRY 的情况下可能很有用。

Answer 6

这里有一个 Plunk 可以满足你的需求：http://plnkr.co/edit/TTlbSv?p=preview

这个想法是您直接使用 Promise 及其“then”函数来操作和访问异步返回的响应。

app.factory('myService', function($http) {
  var myService = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('test.json').then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  // Call the async method and then do stuff with what is returned inside our own then function
  myService.async().then(function(d) {
    $scope.data = d;
  });
});

这里有一个稍微复杂一点的版本，它缓存了请求，所以你只能在第一次完成它（http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview）：

app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = {};
  };
  $scope.getData = function() {
    // Call the async method and then do stuff with what is returned inside our own then function
    myService.async().then(function(d) {
      $scope.data = d;
    });
  };
});

Answer 7

我认为更好的方法是这样的：

服务：

app.service('FruitsManager',function($q){

    function getAllFruits(){
        var deferred = $q.defer();

        ...

        // somewhere here use: deferred.resolve(awesomeFruits);

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

在控制器中你可以简单地使用：

$scope.fruits = FruitsManager.getAllFruits();

Angular 会自动将解析后的awesomeFruits 放入$scope.fruits。

Answer 8

我读过http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ [AngularJS 允许我们通过直接在作用域上放置一个 Promise 来简化我们的控制器逻辑，而不是在成功回调中手动处理解析的值。]

如此简单方便:)

var app = angular.module('myApp', []);
            app.factory('Data', function($http,$q) {
                return {
                    getData : function(){
                        var deferred = $q.defer();
                        var promise = $http.get('./largeLoad').success(function (response) {
                            deferred.resolve(response);
                        });
                        // Return the promise to the controller
                        return deferred.promise; 
                    }
                }
            });
            app.controller('FetchCtrl',function($scope,Data){
                $scope.items = Data.getData();
            });

希望有帮助

Answer 9

与此相关，我遇到了类似的问题，但不是由 Angular 制作的 get 或 post，而是由第 3 方制作的扩展程序（在我的情况下为 Chrome 扩展程序）。
我面临的问题是 Chrome 扩展程序不会返回 then() 所以我无法按照上述解决方案的方式执行此操作，但结果仍然是异步的。
所以我的解决方案是创建一个服务并进行回调

app.service('cookieInfoService', function() {
    this.getInfo = function(callback) {
        var model = {};
        chrome.cookies.get({url:serverUrl, name:'userId'}, function (response) {
            model.response= response;
            callback(model);
        });
    };
});

然后在我的控制器中

app.controller("MyCtrl", function ($scope, cookieInfoService) {
    cookieInfoService.getInfo(function (info) {
        console.log(info);
    });
});

希望这可以帮助其他人遇到同样的问题。

Answer 10

tosh shimayama 有一个解决方案，但是如果你使用 $http 返回承诺并且承诺可以返回一个值的事实，你可以简化很多：

app.factory('myService', function($http, $q) {
  myService.async = function() {
    return $http.get('test.json')
    .then(function (response) {
      var data = reponse.data;
      console.log(data);
      return data;
    });
  };

  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.asyncData = myService.async();
  $scope.$watch('asyncData', function(asyncData) {
    if(angular.isDefined(asyncData)) {
      // Do something with the returned data, angular handle promises fine, you don't have to reassign the value to the scope if you just want to use it with angular directives
    }
  });

});

coffeescript 中的小演示：http://plunker.no.de/edit/ksnErx?live=preview

你的 plunker 用我的方法更新了：http://plnkr.co/edit/mwSZGK?p=preview

Answer 11

因为是异步的，所以$scope是在ajax调用完成之前获取数据的。

您可以在服务中使用$q 创建promise 并将其返回给 控制器，控制器在then()调用promise中获取结果。

为您服务，

app.factory('myService', function($http, $q) {
  var deffered = $q.defer();
  var data = [];  
  var myService = {};

  myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
      console.log(d);
      deffered.resolve();
    });
    return deffered.promise;
  };
  myService.data = function() { return data; };

  return myService;
});

然后，在您的控制器中：

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function() {
    $scope.data = myService.data();
  });
});

Answer 12

将 UI 绑定到数组时，您需要确保通过将长度设置为 0 并将数据推送到数组中来直接更新同一个数组。

而不是这个（它设置了一个不同的数组引用 data 你的 UI 不会知道）：

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
    });
  };

试试这个：

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data.length = 0;
      for(var i = 0; i < d.length; i++){
        data.push(d[i]);
      }
    });
  };

Here is a fiddle 显示了设置新数组与清空和添加到现有数组之间的区别。我无法让你的 plnkr 工作，但希望这对你有用！