211

データオブジェクトが空のときにHTTPの「Get」リクエストを作成し、成功するとデータオブジェクトにデータを入力するカスタムAngularJSサービスを作成できるようにしたいと考えています。

次回このサービスが呼び出されたときに、HTTPリクエストを再度行うオーバーヘッドを回避し、代わりにキャッシュされたデータオブジェクトを返したいと思います。

これは可能ですか？

4

7 に答える 7

317

Angular の$httpにはキャッシュが組み込まれています。ドキュメントによると：

cache – {boolean|Object} – $cacheFactory で作成されたブール値またはオブジェクトで、HTTP 応答のキャッシュを有効または無効にします。詳細については 、$http キャッシングを参照してください。

ブール値

そのため、オプションで true にcache設定できます。

$http.get(url, { cache: true}).success(...);

または、構成タイプの呼び出しを希望する場合:

$http({ cache: true, url: url, method: 'GET'}).success(...);

キャッシュ オブジェクト

キャッシュ ファクトリを使用することもできます。

var cache = $cacheFactory('myCache');

$http.get(url, { cache: cache })

$cacheFactoryを使用して自分で実装できます(特に $resource を使用する場合は簡単です)。

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });
}
于 2013-01-02T06:25:38.020 に答える
48

今はもっと簡単な方法があると思います。これにより、すべての $http リクエスト ($resource が継承するもの) の基本的なキャッシュが有効になります。

 var app = angular.module('myApp',[])
      .config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])
于 2013-08-06T00:35:32.150 に答える
12

現在の安定版 (1.0.6) でこれを行う簡単な方法は、コードを大幅に削減することです。

モジュールをセットアップしたら、ファクトリを追加します。

var app = angular.module('myApp', []);
// Configure routes and controllers and views associated with them.
app.config(function ($routeProvider) {
    // route setups
});
app.factory('MyCache', function ($cacheFactory) {
    return $cacheFactory('myCache');
});

これで、これをコントローラーに渡すことができます。

app.controller('MyController', function ($scope, $http, MyCache) {
    $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) {
        // stuff with results
    });
});

欠点の 1 つは、キー名も自動的に設定されるため、キー名をクリアするのが難しいことです。うまくいけば、キー名を取得するために何らかの方法で追加されることを願っています。

于 2013-05-04T19:21:58.363 に答える
5

AngularJS ファクトリはシングルトンであるため、http リクエストの結果を単純に保存し、次にサービスが何かに注入されたときにそれを取得できます。

angular.module('myApp', ['ngResource']).factory('myService',
  function($resource) {
    var cache = false;
    return {
      query: function() {
        if(!cache) {
          cache = $resource('http://example.com/api').query();
        }
        return cache;
      }
    };
  }
);
于 2016-01-12T04:21:04.943 に答える