$http 结果没有从缓存中检索？

Question

在第一个 $http 请求中，我将结果保存在缓存中我试图测试它是否缓存为空它不应该为空，因为我已经将结果保存在我的缓存中但它给了我未定义的错误谁能告诉我的代码出了什么问题这是控制器    vm.getTopHotels =  function(){     var hotelsLimit =  10;     var top_hotels =      dataService.getHotels()       .then(          function(hotels){             console.log(hotels);             sortHotels = commonMethods.sortHotels(hotels.data.data,'Rating','SORT_DESC');              hotelDetailsCheck = checkDetailsIfExists(sortHotels);             //Get only top 10 hotels for home page             top_hotels =  hotelDetailsCheck.slice(0,10);             vm.topHotels =  top_hotels;          },          function(err){             console.log(err);          });    };  vm.getTopHotels();   vm.getRHotels = function(){    dataService.getHotels()    .then(function(hotels){         console.log('hotels recieced 2 ');    },    function(err){       console.log(err);    }); } vm.getRHotels();**dataService 是 Facotry 在这里调用 $http 方法 ** 为 vm.getTopHotels 我将结果保存在缓存中，所以 getRHotels 在调用 $Http 时我正在检查如果缓存不为空，它应该检索数据如果没有，则从缓存中调用 $Http 请求，但是对于此函数，它也在调用 $http 为什么？因为我已经将结果保存在缓存中，谁能告诉我出了什么问题？这是调用 $http 方法并保存在缓存中的 dataService 代码(function(){      angular       .module('app')       .factory('dataService',DataFactory);       DataFactory.$inject = ['$http','$q','$cacheFactory']       function DataFactory($http,$q,$cacheFactory){          var cache = $cacheFactory('localCache');          var service = {              getHotels:getHotels          };           return service;         function getHotels(){          var def = $q.defer();          var hotelsData = cache.get('hotelsData');          console.log(hotelsData);         if(!hotelsData){           }          }       }})();

Answer 1

您实际上可以通过将 cache:true 添加到配置对象来指定 $http 来缓存结果。

function getHotels() {

  return $http.get('/hotels/getHotelsData', {cache:true});

}

您可以在此处阅读有关 $http 配置的更多信息：https ://docs.angularjs.org/api/ng/service/$http

还要澄清一下，$q.defer 是一个帮助器，它允许您将非承诺 API 回调包装为承诺。$http 返回一个承诺。您可以只返回 $http.get 的响应并对其执行 .then 。

如果您需要在返回数据之前对其进行操作，您仍然不需要将其包装在 $q.defer() 中

function getHotels() {

  return $http.get('/hotels/getHotelsData', {cache:true})

  .then(function(response){

    response.data[0].hotelName = 'changedName';

    return response;

  })

}

Answer 2

该getHotels函数有一个竞争条件：在数据从服务器返回之前对该函数的第二次调用将允许第二次 HTTP GET 请求。

由于 $http 服务会立即返回一个 Promise，因此最好缓存该 Promise。

 var hotelsPromise = null;

 function getHotels(){

     if (hotelsPromise) return hotelsPromise;

     //ELSE

     hotelsPromise = $http.get('/hotels/getHotelsData')

       .then(function successCallback(response){

         return response.data;

     },

         function errorCallback(response){

             throw 'Failed to retrieve hotels';

     });

     return hotelsPromise;

 }

这将避免错误的多个 HTTP GET 请求。