What is the correct way to share the result of an Angular Http network call in RxJs 5?

by

EDIT: as of 2021, the proper way is to use the shareReplay operator natively proposed by RxJs. See more details in below answers.

Cache the data and if available cached, return this otherwise make the HTTP request.

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {Data} from './data';

@Injectable()
export class DataService {
  private url: string = 'https://cors-test.appspot.com/test';
  
  private data: Data;
  private observable: Observable<any>;

  constructor(private http: Http) {}

  getData() {
    if(this.data) {
      // if `data` is available just return it as `Observable`
      return Observable.of(this.data); 
    } else if(this.observable) {
      // if `this.observable` is set then the request is in progress
      // return the `Observable` for the ongoing request
      return this.observable;
    } else {
      // example header (not necessary)
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      // create the request, store the `Observable` for subsequent subscribers
      this.observable = this.http.get(this.url, {
        headers: headers
      })
      .map(response =>  {
        // when the cached data is available we don't need the `Observable` reference anymore
        this.observable = null;

        if(response.status == 400) {
          return "FAILURE";
        } else if(response.status == 200) {
          this.data = new Data(response.json());
          return this.data;
        }
        // make it shared so more than one subscriber can get the result
      })
      .share();
      return this.observable;
    }
  }
}

Plunker example

This article https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html is a great explanation how to cache with shareReplay.

More Related Contents:

  1. RxJS: takeUntil() Angular component’s ngOnDestroy()
  2. Best way to “flatten” an array inside an RxJS Observable
  3. What is pipe for in RxJS?
  4. Property ‘toPromise’ does not exist on type ‘Observable’
  5. What is the difference between Promises and Observables?
  6. What is the proper use of an EventEmitter?
  7. What is the difference between Subject and BehaviorSubject?
  8. Observable type error: cannot read property of undefined
  9. How to return value from function which has Observable subscription inside?
  10. Using multiple instances of the same service
  11. How to create an RXjs RetryWhen with delay and limit on tries
  12. Can lazy-loaded modules share the same instance of a service provided by their parent?
  13. Handling refresh tokens using rxjs
  14. How to call component method from service? (angular2)
  15. Pass config data using forRoot
  16. How to achieve a debounce service on input keyup event in angular2 with rxjs
  17. Angular 2 router resolve with Observable
  18. How to make an http call every 2 minutes with RXJS?
  19. Angular 7 – nesting Observables
  20. Angular subscribe elegant
  21. Making sure observables in for loop are all finished before executing other code
  22. Best way to import Observable from rxjs
  23. angular 2 http withCredentials
  24. Angular 2 – Services consuming others services before call a method
  25. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  26. How to make nested Observable calls in Angular2
  27. How to throw error from RxJS map operator (angular)
  28. Angular 2 – multiple instance of service created
  29. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  30. How to send 1000 XHTTP Requests with maximum number of parallel requests

Leave a Comment