AngularJS服务延迟API调用

Question

我试图在没有将所有信息存储在JS或我自己的API中的情况下，从GitHub回购中获取一个国家列表，所以我编写了一个一次性服务来处理这个问题，并将结果缓存在浏览器中，以防再次需要它们。然而，我注意到，按照我编写它的方式，$http.get被称为on load，而不是在向控制器中注入服务时--这意味着浏览器正在请求所有这些国家的数据，即使它是不需要的(例如，当用户访问国家页面时也是如此。

因为服务只是返回一个承诺，所以我可以在控制器中调用countrylist.then(...)。是否有办法保留这一点，但仍将请求推迟到真正需要的时候？

代码如下：

angular.module('myModule')
    .factory('countrylist', ['$http', 'growl', '$q', function ($http, growl, $q) {

        var deferred = $q.defer();
        var flagUrl = "https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/{}.png";

        $http.get('https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-2/slim-2.json',
                {cache: true})
                .success(function (data) {
                    angular.forEach(data, function (item) {
                        item.flag = flagUrl.replace("{}", item['alpha-2'].toLowerCase());
                    });

                    deferred.resolve(data);
                }).error(function (data) {
                    growl.warn("Error loading country data");
                    deferred.reject();
                });

        return deferred.promise;

    }]);

Answer 1

一旦工厂被注入到任何控制器中，工厂中的所有东西都会立即运行，这是在应用程序被引导时发生的。

唯一的方法是使用获取数据的方法从工厂返回一个对象。

angular.module('myModule')
.factory('countrylist', ['$http', 'growl', '$q', function ($http, growl, $q) {
  return {
    fetch: function() {
      var deferred = $q.defer();
      var flagUrl = "https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/{}.png";

      $http.get('https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/slim-2/slim-2.json',
            {cache: true})
            .success(function (data) {
                angular.forEach(data, function (item) {
                    item.flag = flagUrl.replace("{}", item['alpha-2'].toLowerCase());
                });

                deferred.resolve(data);
            }).error(function (data) {
                growl.warn("Error loading country data");
                deferred.reject();
            });

      return deferred.promise;
    }
  };
}]);

然后在你的控制器里你显然要做

countryList.fetch().then(...)

Answer 2

让它变得简单。很简单就像

1. 在服务中返回promise (不需要在服务中使用then )
2. 在控制器中使用then

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

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

app.service('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;
  });
});

这是我从Processing $http response in service收到/粘贴的答案