Question

我正在创建一个示例应用程序，我有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 }但没有运气

由于

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

Angular减少api调用

1 个答案: