Как кэшировать ответ $ http для повторного использования в angularjs

Чтобы эффективно кэшировать ответ от 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 в сервисе будет пустым, поэтому он отправит HTTP-запрос. При последующих запусках будет заполнен _groupCache. Вы можете уточнить это, сохранив кешированные группы в локальном хранилище в браузере, который сохранит его в кэше даже после загрузки страницы.

Обратите внимание, что возврат функции getGroups ВСЕГДА будет асинхронным, поэтому все, что нуждается в этих данных, должно быть привязано к. Then по возврату getGroups, как в этом примере.

В вашем примере обратный вызов.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'));
    });
}])

Спасибо за вашу помощь. Я также нашел это:

erp.run(['$http', '$rootScope',
    function($http, $rootScope) {      
     $http({ cache: true, url: './php/fetchElement.php', method: 'GET'})
        .success(function(data) {
          $rootScope.resource = data.records;         
        });
    }
]);

erp.service('elementData',['$rootScope',
   function($rootScope) {
        //console.log($rootScope.resource);
        if($rootScope.resource){
            return $rootScope.resource;
        }
    }
]);

вы можете использовать служебную переменную.

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*/
  }
//....