Veri nesnesi boş olduğunda ve veri nesnesini başarılı bir şekilde doldururken bir HTTP 'Get' isteği yapan özel bir AngularJS hizmeti oluşturabilmek istiyorum.

Bir dahaki sefere bu hizmet için bir çağrı yapıldığında, HTTP isteğini tekrar yapma yükünü atlamak ve bunun yerine önbelleğe alınmış veri nesnesini döndürmek istiyorum.

Mümkün mü?

Angular's $ http yerleşik bir önbelleğe sahiptir . Dokümanlara göre:

cache - {boolean | Object} - HTTP yanıtının önbelleğe alınmasını etkinleştirmek veya devre dışı bırakmak için $ cacheFactory ile oluşturulan bir boolean değeri veya nesne . Daha fazla bilgi için $ http Önbellekleme konusuna bakın .

Boole değeri

Yani ayarlayabilirsiniz cacheiçin gerçek onun seçeneklerinde:

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

veya yapılandırma türünü tercih ediyorsanız:

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

Önbellek Nesnesi

Ayrıca bir önbellek fabrikası da kullanabilirsiniz:

var cache = $cacheFactory('myCache');

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

$ CacheFactory kullanarak kendiniz uygulayabilirsiniz (özellikle $ resource kullanırken elverişli ):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });
}

Şimdi daha kolay bir yol olduğunu düşünüyorum. Bu, tüm $ http istekleri için temel önbellekleme sağlar ($ kaynak devralır):

 var app = angular.module('myApp',[])
      .config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])

Mevcut kararlı sürümde (1.0.6) bunu yapmanın daha kolay bir yolu çok daha az kod gerektirir.

Modülünüzü kurduktan sonra bir fabrika ekleyin:

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');
});

Şimdi bunu kontrolörünüze aktarabilirsiniz:

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

Bir dezavantajı, anahtar adlarının da otomatik olarak ayarlanmasıdır, bu da onları temizlemeyi zorlaştırabilir. Umarım anahtar isimleri almak için bir şekilde eklerler.

$ Http yerleşik önbelleğe alma, ancak daha fazla kontrol istiyorsanız kütüphane açısal önbellek göz atın . Yaşam süresi, periyodik temizleme ve önbelleği localStorage'a devam ettirme seçeneği ile $ http önbelleğini sorunsuz bir şekilde artırmak için kullanabilirsiniz.

FWIW, önbelleğinizi yalnızca varsayılan JSON dizeleri yerine POJO olarak etkileşime girebileceğiniz daha dinamik bir veri deposu haline getirmek için araçlar ve desenler de sağlar. Bu seçeneğin faydası hakkında henüz yorum yapılamıyor.

(Daha sonra, bununla ilgili olarak, ilgili kütüphane açısal verileri , $ resource ve / veya Restangular için bir değişikliktir ve açısal önbelleğe bağlıdır.)

AngularJS fabrikaları tekil olduğundan , http isteğinin sonucunu saklayabilir ve bir dahaki sefere servisinize enjekte edildiğinde geri alabilirsiniz.

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;
      }
    };
  }
);

angularBlogServices.factory('BlogPost', ['$resource',
    function($resource) {
        return $resource("./Post/:id", {}, {
            get:    {method: 'GET',    cache: true,  isArray: false},
            save:   {method: 'POST',   cache: false, isArray: false},
            update: {method: 'PUT',    cache: false, isArray: false},
            delete: {method: 'DELETE', cache: false, isArray: false}
        });
    }]);

önbelleği true olarak ayarlayın.

Açısal 8'de bunu yapabiliriz:

import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}

Buna şöyle diyebilirsiniz:

this.globalDataService.getYourModel().subscribe(yourModel => {


});

Yukarıdaki kod, uzak API'nin sonucunu ilk çağrıda önbelleğe alacaktır, böylece bu yönteme yönelik başka istekler için kullanılabilir.