Angular'da HTTP Cache: $http ile Yanıtları Hızlandır

Angular'ın $http servisi varsayılan olarak HTTP yanıtlarını önbelleğe almaz. Her istek sunucuya gider, bu da gereksiz ağ trafiği ve yavaş yükleme demektir. Neyse ki caching'i etkinleştirmek basit.

En kolay yol $http.get() çağrısına cache parametresi eklemek. Sadece cache: true ayarla ve bitti, tarayıcı yanıtı saklar, aynı URL'ye sonraki isteklerde hemen döner.

1$http.get('/request-url', { cache: true }).then(function success(response) {
2// İlk istek sunucuya gider, yanıt önbelleğe alınır
3console.log(response.data);
4}).catch(function error(err) {
5// Hata durumu
6console.error(err);
7});

$resource kullanıyorsan, factory tanımında cache özelliğini ilgili action'a ekle. Örneğin bir API endpoint'inin GET isteğini cache'le:

1app.factory('API', ['$resource', function($resource) {
2return $resource('/api/endpoint', {}, {
3get: {
4method: 'GET',
5cache: true
6}
7});
8}]);

Bu yaklaşım özellikle sık erişilen, nadiren değişen veriler için (kullanıcı profili, ayarlar, statik listeler) ideal. Caching, tarayıcı belleğinde tutulur; sayfa yenilense cache temizlenir.

Dikkat et: cache: true tüm parametreleri göz önüne alır. Farklı parametrelerle aynı endpoint'e istek atarsan, her kombinasyon ayrı önbelleğe alınır. Dinamik veriler için (real-time güncellemeler, kullanıcı-spesifik içerik) caching'i devre dışı bırak veya daha sofistike bir strateji (örneğin cache invalidation) kullan.

Özet: Statik veya nadir değişen veriler için cache: true ekle, ağ hızını artır ve sunucu yükünü düşür.