Angular 减少 api 调用答案

【问题标题】：Angular reduce api callsAngular 减少 api 调用
【发布时间】：2016-09-10 16:27:09
【问题描述】：

我正在创建一个示例应用程序，其中我有用于获取类的 API 调用

http://localhost:8080/school/4/classes

我为此创建了一个服务

appServices.service( 'classService', ['$http', '$q', 
  function($http,$q){
    this.getClass = function() {

      var classes = $q.defer()
      $http.get( "http://localhost:8080/school/4/classes" )
        .then(function(data) {
          classes.resolve(data)
        });
      return classes.promise
    }
  }])

我有两个控制器，分别是 ctrl1 和 ctrl2，在这两个控制器中我都有服务代码

 classService.getClass().then(function(data) {
   $scope.classList = data.data.classes
 })

我的问题是发生了两次 api 调用，我们可以将许多 api 调用减少到一次，因为我的数据不会被更改。我已经尝试过{ cache: true }，但没有运气

谢谢

【问题讨论】：

你试过调试你的controller吗？何时调用 classService.getClass() 方法？有时（由于错误的路由或不正确的事件绑定）方法可能会被多次调用。所以你的这段代码可能没有任何问题。

标签： angularjs

【解决方案1】：

防止多次调用的最简单方法是使用cache 选项：

app.service('classService', ['$http', function($http) {
  this.getClass = function() {
    return $http.get('data.json', { cache: true }).then(function(response) {
      return response.data;
    });
  };
}])

请注意，您不应使用$q，因为它是多余的。

如果您需要对缓存进行更多控制，您可以存储对已解决承诺的引用：

app.service('classService', ['$http', function($http) {
  var promise

  this.getClass = function() {
    if (!promise) {
      promise = $http.get('data.json').then(function(response) {
        return response.data;
      });  
    }

    return promise
  };
}]);

还有一种最灵活的模式：

app.service('classService', ['$http', '$q', function($http, $q) {
  var data;

  this.getClass = function() {
    return data ? $q.when(data) : $http.get('data.json').then(function(response) {
      data = response.data;
      return data;
    });
  };
}])

【讨论】：