Question

我在控制器中使用$ 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;
   })
}

AngularJS仅在未定义时获取数据

1 个答案: