Question

我正在尝试使用$ http.get（）响应作为向控制器提供的服务。请帮忙！

erp.service('elementData',['$http', '$cacheFactory', function($http, $cacheFactory){
    var fetchCache = $cacheFactory('ele', {number: 1}); 

    $http({url: "./php/fetchElement.php", 
    method: 'GET'}).success(function(data){
        fetchCache.put(1, data.records);
        console.log(fetchCache.info('ele'));        
        //return fetchCache.get(1);
    });
    console.log(fetchCache.info('ele'));



}])

的console.log（fetchCache.info（＆＃39; ELE＆＃39;））;提供不同的结果。

Answer 1

要有效地缓存来自HTTP调用的响应，并返回该调用（如果存在），我会做这样的事情

angular.module('app').factory('dataService', dataService);
dataService.$inject = ['$http', '$q'];

function dataService($http, $q) {
    var service = {
        getGroups: getGroups,
        _groupCache: null
    };

    return service;

    function getGroups() {
        // Return from local cache variable if we have it.
        if (service._groupCache) return $q.resolve(service._groupCache);
        // Otherwise, return from API.
        return $http.get("api/ms/groups/").then(
            function (response) {
                service._groupCache = response.data;
                return response.data;
            }
        );
    }

然后可以将其注入您的控制器并按如下方式使用：

angular.module('app').controller('PageCtrl', PageCtrl);

PageCtrl.$inject = ['dataService'];

function PageCtrl(dataService) {
    var vm = this;
    // "Public" properties
    vm.groups = null;
    dataService.getGroups().then(function (groups) {
        vm.groups = groups;
    });
}

然后您应该可以访问页面内的组。第一次运行此代码时，服务上的_groupCache将为null，因此它将发送HTTP请求。在后续运行中，将填充_groupCache。您可以通过将缓存的组存储在浏览器的本地存储中来进一步优化这一点，即使在页面加载后也会将其缓存。

请注意，返回getGroups函数将始终是异步的，因此需要该数据的任何内容都应该在getGroups返回时链接到.then，如本例所示。

在您的示例中，.success回调将异步执行，因此第二个console.log将在第一个之前执行。要解决这个问题，你可以重写：

erp.service('elementData',['$http', '$cacheFactory', function($http, $cacheFactory){
    var fetchCache = $cacheFactory('ele', {number: 1}); 

    $http({url: "./php/fetchElement.php", 
    method: 'GET'}).then(function(data){
        fetchCache.put(1, data.records);
        console.log(fetchCache.info('ele'));        
    }).then(function () {
        console.log(fetchCache.info('ele'));
    });
}])

Answer 2

您可以使用服务变量。

erp.service('elementData',['$http', '$cacheFactory', function($http, $cacheFactory){
    var resource = {};
    // var fetchCache = $cacheFactory('ele', {number: 1}); 
    resource.loadedData = null;
    resource.getData = function(callback){  
      $http({url: "./php/fetchElement.php", 
      method: 'GET'}).succes(function(data){
        callback(data);
      });        
          //return fetchCache.get(1);
    }
    console.log(fetchCache.info('ele'));

}]);


/*....
In side of your controller */ 
  if(elementData.loadedData){
    $scope.elementData = elementData.loadedData;
    process();
  } else {
    elementData.getData(function(data){
      $scope.elementData = data;
      elementData.loadedData = data;
      /*
        if you want set it on localStorage you can use as
        localStorage.loadedData instead of elementData.loadedData;
      */
      process();
    });
  }
  function process(){
    /* then you can use your data*/
  }
//....

Answer 3

感谢您的帮助。我也发现了这个：

<location path="SecuredMethod.asmx">
  <system.web>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
  </system.web>
</location>

如何缓存$ http响应以便在angularjs中重用

3 个答案: