2

$http私のサービスは、コントローラーがアクティブ化されたときにキャッシュを使用してすべてのアイテムを設定します。を実行して新しいアイテムを作成する場合$http.post()、キャッシュを更新する最善の方法は何ですか?

以下の例の問題は、キャッシュされたgetAll呼び出しが古い配列を返すことです。

(function () {

    'use strict';

    angular
        .module('myapp')
        .factory('items', itemsService)
        .controller('Items', itemsController);

    // myCache was created using angular-cache

    itemsService.$inject = ['$http', 'myCache'];
    function itemsService ($http, myCache) {

        var service = {
            getAll : function () {
                return $http.get('/api/item', myCache);
            },
            createNew : function (item) {
                return $http.post('/api/item', item);
            }
        };

        return service;
    }

    itemsController.$inject = ['items'];
    function itemsController (items) {

        var vm = this;
        vm.items = [];
        vm.item = {};

        activate();

        function activate() {
            items.getAll().then(function(response){
                vm.items = response.data || [];
            });
        }

        function createNew() {
            items.createNew(vm.item).then(function(response){
                vm.items.push(response.data);
            });
        }
    }

})();

編集#1:キャッシュの無効化

新しいアイテムが作成されたときにキャッシュを無効にするようにコードを修正しました。サービスの追加$q、および手動での呼び出しrejectまたはresolve呼び出しは、非常に退屈で肥大化しているように見えます。

より良い方法はありますか?

(function () {

    'use strict';

    angular
        .module('myapp')
        .factory('items', itemsService)
        .controller('Items', itemsController);

    itemsService.$inject = ['$q', '$http', 'CacheFactory'];
    function itemsService ($q, $http, CacheFactory) {

        var _cache = CacheFactory.get('items') || CacheFactory('items');

        var service = {
            getItems : function(refresh) {
                var d = $q.defer();
                if (refresh) { _cache.invalidate(); }
                $http.get('/api/item', _cache).then(function(response){
                    d.resolve(response.data);
                }, function(err){ d.reject(err); });
                return d.promise;
            },
            createNew   : function(info){
                var d = $q.defer();
                $http.post('/api/item', info).then(function(response){
                    _cache.invalidate();
                    d.resolve(response.data);
                }, function(err){ d.reject(err); });
                return d.promise;
            }
        };

        return service;
    }

    itemsController.$inject = ['items'];
    function itemsController (items) {

        var vm = this;
        vm.items = [];
        vm.item = {};

        activate();

        function activate() {
            items.getAll().then(function(response){
                vm.items = response.data || [];
            });
        }

        function createNew() {
            items.createNew(vm.item).then(function(response){
                vm.items.push(response.data);
            });
        }
    }

})();
4

0 に答える 0