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

Question

By using Http, we call a method that does a network call and returns an http observable:

getCustomer() {
    return          


        

Answer 1

I assume that @ngx-cache/core could be useful to maintain caching features for the http calls, especially if the HTTP call is made both on browser and server platforms.

Let's say we have the following method:

getCustomer() {
  return this.http.get('/someUrl').map(res => res.json());
}

You can use the Cached decorator of @ngx-cache/core to store the returned value from the method making the HTTP call at the cache storage (the storage can be configurable, please check the implementation at ng-seed/universal) - right on the first execution. The next times the method is invoked (no matter on browser or server platform), the value is retrieved from the cache storage.

import { Cached } from '@ngx-cache/core';

...

@Cached('get-customer') // the cache key/identifier
getCustomer() {
  return this.http.get('/someUrl').map(res => res.json());
}

There's also the possibility to use caching methods (has, get, set) using the caching API.

anyclass.ts

...
import { CacheService } from '@ngx-cache/core';

@Injectable()
export class AnyClass {
  constructor(private readonly cache: CacheService) {
    // note that CacheService is injected into a private property of AnyClass
  }

  // will retrieve 'some string value'
  getSomeStringValue(): string {
    if (this.cache.has('some-string'))
      return this.cache.get('some-string');

    this.cache.set('some-string', 'some string value');
    return 'some string value';
  }
}

Here are the list of packages, both for client-side and server-side caching:

• @ngx-cache/core: cache utility
• @ngx-cache/platform-browser: SPA/Browser platform implementation
• @ngx-cache/platform-server: server platform implementation
• @ngx-cache/fs-storage: storage utility (required for server platform)