Angular 2 cache observable http result data [duplicate]

by

If you lean into observables as a means of sharing data, you can adopt the following approach:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, ReplaySubject } from 'rxjs';

import { SomeModel } from 'path/to/it';

@Injectable({
  providedIn: 'root'
})
export class CachedService {
 
  private dataSubject = new ReplaySubject<SomeModel>(1);
  
  data$: Observable<SomeModel> = this.dataSubject.asObservable();

  constructor(private http: HttpClient) { }

  fetch() {
    this.http.get<SomeModel>(...).subscribe(res => this.dataSubject.next(res));
  }
}

This will make an HTTP call when the fetch method is called, and any subscribers to service.data$ will get the response from the ReplaySubject. As it replays earlier values, any subscribers who join after the HTTP call resolves will still get the previous response.

If you want to trigger an update, you can just call service.fetch() to kick off a new HTTP call and all subscribers will be updated once the new response arrives.

Your components would then look something like:

@Component({ ... })
export class SomeComponent implements OnDestroy, OnInit {

  private subscription?: Subscription;

  constructor(private service: CachedService) { }

  ngOnInit() {
    this.service.fetch();
    this.subscription = this.service.data$.subscribe(...);
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

I’ve recently written a blog article on this approach for my colleagues: http://blog.jonrshar.pe/2017/Apr/09/async-angular-data.html

More Related Contents:

  1. How to check the length of an Observable array
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  4. Delegation: EventEmitter or Observable in Angular
  5. What is the proper use of an EventEmitter?
  6. Observable type error: cannot read property of undefined
  7. How do I create a singleton service in Angular 2?
  8. How can I watch for changes to localStorage in Angular2?
  9. Using multiple instances of the same service
  10. Wait for Angular 2 to load/resolve model before rendering view/template
  11. async/await in Angular `ngOnInit`
  12. How to create an RXjs RetryWhen with delay and limit on tries
  13. Can lazy-loaded modules share the same instance of a service provided by their parent?
  14. Angular2 – Interaction between components using a service
  15. How to call component method from service? (angular2)
  16. Testing – Can’t resolve all parameters for (ClassName)
  17. Creating and returning Observable from Angular 2 Service
  18. Pass config data using forRoot
  19. How to use Dependency Injection (DI) correctly in Angular2?
  20. Angular 7 – nesting Observables
  21. Angular – Make multiple HTTP calls sequentially
  22. angular 2 http withCredentials
  23. Angular 2 – Services consuming others services before call a method
  24. How can I create an observable with a delay
  25. Merging http observables using forkjoin
  26. Subscribe to observable is returning undefined
  27. How to return observable from subscribe
  28. Property ‘toPromise’ does not exist on type ‘Observable’
  29. How to return value inside subscribe Angular 4
  30. Angular 2 – multiple instance of service created

Leave a Comment