AJAX 加载 JSON 数据并将其存储在 angularjs 服务中答案

【问题标题】：AJAX load JSON data and storing it at angularjs serviceAJAX 加载 JSON 数据并将其存储在 angularjs 服务中
【发布时间】：2016-04-05 08:17:08
【问题描述】：

我是 AngularJS 的新手。如果我的问题很愚蠢，我真的很抱歉，但是我两天都找不到决定。所以，我有一个服务，它必须在初始化期间通过$http 将数据加载到自身并存储。我找到了一些关于promises 的信息，但是每次我访问它时它都会加载数据。但我希望这些数据被加载一次并且可以更改和保存。为了更好地理解这就是我想要的

app.run(function ($http, MeasurUnitsService) {
        $http.get('jsonData/tabs.json').success(function (data) {
            MeasurUnitsService.tabs = data;
        });

        $http.get('jsonData/measurmentUnits.json').success(function(data){
            MeasurUnitsService.measurmentUnits = data;                      
        });
    });


angular.module("emis-calc").service('MeasurUnitsService', function($http){  
     var tabs = {};
    var measurmentUnits = {};   
    var ConvertTo = function(){
        // some logic with accessing to measurmentUnits 
        // measurmentUnits is empty
        return result;
    }
    return {
        convertTo : ConvertTo,
        tabs : tabs,
        measurmentUnits : measurmentUnits
    }       
})

但据我了解，因为$http.get() 是异步和闭包，MeasurUnitsService.tabs 和MeasurUnitsService.measurmentUnits 始终是{}at 控制器和其他服务。感觉很容易实现，但是根本找不到。也许有任何lock() 方法？另外，如果不是太难的话，你能不能更详细地解释一下我的主要错误在哪里。

【问题讨论】：

标签： javascript angularjs json ajax

【解决方案1】：

您应该在服务中提取您的 http 请求，并在您的控制器中使用该服务。

angular.module("emis-calc").service('MeasurUnitsService', function($http){  
   var tabs = null; 
  
   function getTabs(cb) {
     if(tabs) {
       cb(tabs) 
     } else {
       $http.get('jsonData/tabs.json').success(function (data) {
         tabs = data;
         cb(tabs);
       });
     }
   }
  
    return {
      getTabs
    }

这样你的数据只会被加载一次。

【讨论】：

当然你可以使用 Promises 代替回调