Question

AngularJS 仅在未定义时获取数据

2015-05-12

142

javascript angularjs http

我正在使用控制器中的 $http 获取一些数据以向用户显示一些数据。但完成此操作后，我不想再进行任何获取，因为数据已获取。但是，当从一个选项卡（控制器）转到另一个选项卡（控制器）时，始终会获取数据。我的知识仅限于 Web 和 AngularJS。我以为下面的代码可以工作，但始终会获取数据。

// We already have data don't bother to get it again
if (angular.isDefined($scope.data)) {
    console.log("Already got data, no fetch");
    return;
} else {
    console.log("Fetch data first time");
}

$http.post('/api/data'......

Answer 1

最有可能的是（尽管您的示例中没有足够的代码来确定）您的选项卡控制器具有不同的范围，因此实际上没有为第二个选项卡（控制器）定义 $scope.data 。

您当然可以将数据放在 $rootScope 上，但我建议不要这样做，因为我不建议将其放在全局变量上。

此外，这里会出现竞争条件，因为您可能会在数据到达之前切换选项卡，这将触发第二个请求。

解决这个问题的好方法是使用服务。服务可以缓存承诺并将其返回给下一个调用者。

.factory("fooSvc", function($http){
  var promise;
  return {
    getData: function(){
       if (promise) return promise;
       promise = $http.get("/some/url").then(function(response){
         // optionally post-process the response
         return response.data;
       });

       return promise;
    }
  }
})

然后，在控制器中，您可以直接获取数据，而不必担心重复调用：

.controller("TabCtrl1", function($scope, fooSvc){
   fooSvc.getData().then(function(data){
     $scope.data = data;
   })
}