Question

我在Angular应用程序中调用一些其他API来从服务器获取数据并在页面上显示（例如：主页）。但每次我访问该页面时，都会触发API，并且会获取并显示数据，因为在我的Controller中，我正在调用其余服务。有没有最好的＆＃39;我可以拯救＆＃39;第一次通话时的数据，然后当用户访问同一页面时，显示“已保存的”数据。数据而不是一次又一次地打击休息服务？

此外，有些情况下我想要点击API而不是显示保存的数据（例如：当用户注销并再次登录时，或者在服务器上进行数据更新时）。 Angular实现此类功能的最佳方式是什么？

Here is a working Plunker for demo of my current app. （请参阅home.js了解服务电话示例）。

angular.module('home').controller('HomeCtrl', function($scope, DrinkService) {

  var vm = this;

  vm.loading = true;
  vm.greeting = "Drink World!";

  DrinkService.getDrinks().then(function(response) {
    vm.drinks = response.data.results;
    console.log(vm.drinks);
    vm.loading = false;
  });

}).factory('DrinkService', ['$http',
  function($http) {
    var url = 'https://raw.githubusercontent.com/Randmness/DeathByCaffeine-Enyo/master/data/canonDbList_dbService.json';
    var drinkService = {};

    drinkService.getDrinks = function() {
      return $http.get(url).then(function(response) {
        return response;
      });
    };

    return drinkService;
  }
]);

Answer 1

您可以使用$q使用服务。一个示例服务是

service('myService', function($q, $http) {
  this.data;
  var self = this;

  this.getMyData = function() {
    if (angular.isDefined(self.data)) {
      // use $q to return a promise
      return $q.when(self.data)
    }
    return $http.get('myurl').then(function(resp) {
      self.data = resp;
    })
  }

}

服务将在第一次调用API时设置API的值，并在服务上设置值，以便后续调用使用保存的数据。

在您的控制器中，您可以拨打myService.getMyData()

您可以看到类似的问题here

Answer 2

@ user2954587答案会帮到你。我还想补充说，服务是单例，即它们被创建一次，因此非常适合存储数据，在其他控制器之间共享数据等。另一方面，控制器绑定到视图。每次加载视图时，也会加载绑定到它的控制器。您还需要从服务中删除一些数据（在您注销的情况下），只需将inject jQuery设置为执行注销操作的控制器，并将myService设置为data 。

如何在每次访问路径/页面时阻止控制器中的其余API调用

2 个答案: