Question

我的目标是通过在$http中缓存一些静态JSON对象来让$cacheFactory在我的本地文件系统上工作。我希望完全避免网络请求，只使用缓存内容。

问题是$http正在发出服务器请求，而不管是否存在缓存内容。我的代码如下。

缓存工厂

myApp.factory('jsonCache', function($cacheFactory){
  // create new cache object
  // (tried $cacheFactory.get('$http') as well, but same result)
  var cache = $cacheFactory('jsonCache');

  // put static value in cache
  cache.put('/json/file1.json', {"key":"value"});

  return cache;
});

工厂使用$ http

myApp.factory('AjaxFactory', function($http, jsonCache){

  console.log(jsonCache.info()); // {id: 'jsonCache', size: 1}

  // this will make a request to "http://localhost/json/file1.json"
  // even though there is an entry for that URL in the cache object
  $http.get('/json/file1.json', {cache: jsonCache}).success(/* ... */);

  return { /* ... */ };
});

此时我认为它可能是我在cache.put()中使用的数据的格式，但不确定。

Answer 1

请参阅下面的演示代码，表示对您有所帮助

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider.state('state1', {
      url: "/state1",
      template: "<h1>State1 </h1> <pre>{{cache | json}}</pre>",
      controller: 'state1Ctrl'
    })
    .state('state2', {
      url: "/state2",
      template: "<h1>State2 </h1><pre>{{cache | json}}</pre>",
      controller: 'state2Ctrl'
    });

});


app.controller('state1Ctrl', function($scope, myCache) {

  var cache = myCache.cache.get('jsonCache');



  //check if cached data exist

  if (cache) {

    //use cached data
    $scope.cache = myCache.cache.get('jsonCache');

    //if not update cache
  } else {
    myCache.update().success(function(data) {

      //set cache
      myCache.cache.put('jsonCache', data.info);

      console.log(myCache.cache.info());


      //get  cached data
      $scope.cache = myCache.cache.get('jsonCache');

    }).error(function() {

      console.log("error");
    });
  }

});
app.controller('state2Ctrl', function($scope, myCache) {
  var cache = myCache.cache.get('jsonCache');


  if (cache) {
    $scope.cache = myCache.cache.get('jsonCache');

  } else {
    myCache.update().success(function(data) {

      myCache.cache.put('jsonCache', data.info);

      console.log(myCache.cache.info());

      $scope.cache = myCache.cache.get('jsonCache');

    }).error(function() {

      console.log("error");
    });
  }

});
app.factory('myCache', function($cacheFactory, $http) {
  // create new cache object

  var cache = $cacheFactory('jsonCache');

  // put static value in cache
  function update() {
    alert("update")
    return $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra");
  }
  return {
    cache: cache,
    update: update
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="
               https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

<meta charset="utf-8">
<title>JS Bin</title>

<body ng-app="app">
  <div ui-view></div>
  <!-- We'll also add some navigation: -->
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
</body>

Answer 2

我实际上能够根据需要在http://plnkr.co/edit/x1nfjwEoJOxzZN5PUyrX?p=preview

上使其正常工作

angular.module("myApp", [])

.factory('jsonCache', function($cacheFactory) {
  // create new cache object
  // (tried $cacheFactory.get('$http') as well, but same result)
  var cache = $cacheFactory('jsonCache');

  // put static value in cache
  cache.put('file1.json', {
    "key": "From Cache Factory"
  });

  return cache;
})

.factory('jsonFactory', function($http, jsonCache) {

  var get = function(url) {
    return $http.get(url, {
      cache: jsonCache
    });
  };

  return {
    get: get
  };

})

.controller("Ctrl", function($scope, jsonFactory, jsonCache) {
  $scope.cacheInfo = jsonCache.info();

  jsonFactory.get('file1.json').success(function(res) {
    $scope.json = res;
  });
});

我认为原始代码的问题是许多第三方模块依赖项之一的结果。（DOH！）

我对代码的解决方法如下：

myApp.factory('jsonFactory', function($http, $q, jsonCache){
  var get = function(url){
    var data = jsonCache.get(url);

    // if data exists in cache, wrap in promise and return
    // or do regular $http get
    if(data){
      return $q(function(resolve, reject){ resolve(data); });
    } else {
      return $http.get(url);
    }
  };

  return {
    get: get
  };
});

如何使用静态JSON内容填充角度$ http缓存（$ cacheFactory）？

2 个答案: