Cara menyegarkan / membatalkan cache $ resource di AngularJS


94

Saya memiliki User $ resource sederhana yang menggunakan implementasi cache $ http default seperti:

factory('User', function($resource){
    return $resource(endpoint + '/user/current/:projectId', {},
        {get: 
            {
                cache: true,
                method: 'GET'
            }
        }
    );
})

Ini bekerja dengan sangat baik, yaitu server saya hanya dipanggil sekali dalam aplikasi saya, kemudian nilainya diambil dari cache.

Tetapi saya perlu menyegarkan kembali nilai dari server setelah operasi tertentu. Apakah ada cara mudah untuk melakukannya?

Terima kasih.


1
Saya menggunakan tidak stabil (1.1.5 tapi saya pikir itu ada sejak 1.1.2) cache- {boolean|Cache}- Jika benar, cache $ http default akan digunakan untuk menyimpan permintaan GET, jika tidak jika contoh cache dibangun dengan
Alexandre Bulté

1
Saya mengalami masalah serupa tetapi hanya saat pengujian. bagaimana cara memecahkan masalah ini di tingkat browser?
chovy

Jawaban:


116

Simpan boolean dan dapatkan $httpcache:

var $httpDefaultCache = $cacheFactory.get('$http');

Kemudian Anda dapat mengontrolnya seperti cache lain yang dibuat $cacheFactory, contoh penggunaan yang disediakan di bawah ini:

$httpDefaultCache.remove(key);
// Where key is the relative URL of your resource (eg: /api/user/current/51a9020d91799f1e9b8db12f)

52
Sempurna, terima kasih! Persis apa yang saya cari. Bagi mereka yang bertanya-tanya, Anda dapat memanggil $ cacheFactory.get ('$ http'). Remove (key), dengan kunci menjadi URL relatif sumber daya Anda (misal: / api / user / current / 51a9020d91799f1e9b8db12f).
Alexandre Bulté

2
Sebenarnya saya menemukan bahwa saya perlu menentukan url lengkap bersama dengan parameter kueri apa pun saat memanggil remove (). Apakah saya melewatkan sesuatu di sini?
shangxiao

3
Saya memiliki parameter kueri dinamis. Apakah ada cara untuk mengakses url dari $resourcepabrik?
suzanshakya

1
Saat ini berhasil. Ini mungkin lebih kompleks dari yang dibutuhkan. Solusi yang lebih baik adalah jika ini diterapkan: github.com/angular/angular.js/issues/9064
KFunk

5
Bagi saya, $ cacheFactory.get ('$ http'). RemoveAll () berhasil, karena saya perlu menghapus semua data yang di-cache.
S. Baggy

18

Alih-alih menggunakan argumen boolean di cacheproperti masing-masing, actionAnda dapat meneruskan turunan cache yang dibuat dengan $ cacheFactory yang dapat Anda kontrol lebih (yaitu, kosongkan cache).

Contoh penggunaan:

app.factory('Todos', function($resource, $cacheFactory) {
    var cache = $cacheFactory('todo');
    return $resource(apiBaseUrl + '/todos/:id', { id: '@id' }, {
        'get': { method: 'GET', cache: cache  },
        'query': { method: 'GET', cache: cache, isArray: true }
    });
});

Terima kasih. Saya melihatnya juga, tapi saya sedang mencari cara "standar" untuk melakukannya sebelum mengambil jalan itu ...
Alexandre Bulté

1
sepertinya pendekatan yang sangat "standar" yang sesuai dengan "cara sudut" :)
Varian

1
Kamu benar. Maksud saya pendekatan dengan cache $ resource standar.
Alexandre Bulté

6

Saya menemukan utas ini mencari sesuatu yang serupa, tetapi menemukan bahwa $ resource akan mengelola cache untuk Anda secara otomatis, jadi tidak perlu memaksa cache dibersihkan.

Idenya adalah jika Anda memiliki sumber daya yang dapat Anda kueri, respons kueri itu akan di-cache, tetapi jika Anda menyimpan sesuatu untuk sumber daya yang sama, data yang sebelumnya di-cache harus tidak valid, sehingga data itu dihapus untuk Anda. Masuk akal bahwa ini akan berhasil.

Berikut beberapa kode yang saya gunakan untuk melakukan ini (Anda dapat mengabaikan bagian kreasi pabrik yang mungkin tampak aneh dan memperhatikan bodi "kelas").

'use strict';

sampleApp.players.$ng.factory('sampleApp.players.PlayerService', [
    '$log',
    '$resource',
    sampleApp.players.PlayerService = function ($log, $resource) {
        var service = {};

        $log.info('Creating player resource.');
        var Player = $resource('/api/players', {}, {query: {
            isArray: true,
            cache: true,
            method: 'GET'
        }});

        service.addPlayer = function(playerName) {
            $log.info('Saving a new player.');
            return new Player({name: playerName}).$save();
        };

        service.listPlayers = function () {
            $log.info('Fetching players.');
            return Player.query();
        };

        return service;
    }]);

Jika Anda memanggil fungsi listPlayers beberapa kali, panggilan pertama membuat permintaan get http dan semua panggilan berikutnya disimpan dalam cache. Jika Anda memanggil addPlayer, posting http dilakukan seperti yang diharapkan, dan panggilan berikutnya ke listPlayers akan melakukan http get (tidak di-cache).

Ini membuat Anda keluar dari urusan mengelola cache ($ http) orang lain dan mencoba mengikuti url mana yang digunakan untuk permintaan dan mana yang membersihkan cache pada waktu yang tepat.

Saya kira moral dari cerita di sini adalah bekerja dengan perpustakaan dan semuanya akan baik-baik saja ... kecuali untuk bug atau fitur yang tidak lengkap, tetapi Angular tidak memiliki semua itu;)

ps Ini semua berjalan di AngularJS 1.2.0.


2
Ya, saya memahami dan mengakui bahwa dalam kondisi "normal" sumber daya Angular tahu bagaimana dan kapan harus membatalkan cache, dan bekerja dengan sempurna. Tetapi kasus penggunaan saya sedikit berbeda: Saya ingin memaksa penyegaran karena Angular tidak memiliki cara untuk mengetahui bahwa penyegaran diperlukan - objek pengguna sedang dimodifikasi di luar aplikasi Angular.
Alexandre Bulté

3
Adakah yang bisa menunjukkan di mana ini didokumentasikan? Saya telah membaca tentang ini sebelumnya di Stack Overflow, tetapi tidak dapat menemukan penyebutannya di dokumentasi. Saya telah mencobanya juga di aplikasi saya, tetapi mungkin telah melakukan kesalahan selama proses ...
Sunil D.

1
Namun tampaknya tidak berfungsi dengan $ delete. Panggilan berikutnya akan menarik dari cache lagi dan item yang dihapus akan muncul kembali. Adakah yang bisa mengkonfirmasi?
Lukus

Ini tidak akan berfungsi ngResource JANGAN MENANGANI pembatalan cache, buka di sini misalnya: stackoverflow.com/questions/25117388/…
HugoPoi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.