Quelle est la bonne façon de partager le résultat d'un appel réseau Angular Http dans RxJs 5?

En utilisant Http, nous appelons une méthode qui effectue un appel réseau et renvoie un http observable:

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

Si nous prenons cela observable et y ajoutons plusieurs abonnés:

let network$ = getCustomer();

let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);

Ce que nous voulons faire, c'est nous assurer que cela ne provoque pas de multiples requêtes réseau.

Cela peut sembler inhabituel, mais c'est en fait assez courant: par exemple, si l'appelant s'abonne à l'observable pour afficher un message d'erreur et le transmet au modèle à l'aide du canal asynchrone, nous avons déjà deux abonnés.

Quelle est la bonne façon de procéder dans RxJs 5?

À savoir, cela semble bien fonctionner:

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

Mais est-ce la façon idiomatique de le faire dans RxJs 5, ou devrions-nous faire autre chose à la place?

Remarque: Conformément à Angular 5 new HttpClient, la .map(res => res.json())pièce dans tous les exemples est désormais inutile, car le résultat JSON est désormais supposé par défaut.

Mettez les données en cache et, si elles sont disponibles en cache, renvoyez-les sinon faites la requête HTTP.

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

Exemple Plunker

Cet article https://blog.oughttram.io/angular/2018/03/05/advanced-caching-with-rxjs.html est une excellente explication sur la façon de mettre en cache avec shareReplay.

Selon la suggestion de @Cristian, c'est une façon qui fonctionne bien pour les observables HTTP, qui n'émettent qu'une seule fois puis se terminent:

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

MISE À JOUR: Ben Lesh dit que la prochaine version mineure après 5.2.0, vous pourrez simplement appeler shareReplay () pour vraiment mettre en cache.

PRÉCÉDEMMENT.....

Tout d'abord, n'utilisez pas share () ou publishReplay (1) .refCount (), ils sont les mêmes et le problème avec cela, c'est qu'il ne partage que si les connexions sont établies alors que l'observable est actif, si vous vous connectez après qu'il se soit terminé , il crée à nouveau un nouvel observable, la traduction, pas vraiment la mise en cache.

Birowski a donné la bonne solution ci-dessus, qui consiste à utiliser ReplaySubject. ReplaySubject mettra en cache les valeurs que vous lui donnez (bufferSize) dans notre cas 1. Il ne créera pas un nouveau observable comme share () une fois que refCount atteint zéro et que vous établissez une nouvelle connexion, ce qui est le bon comportement pour la mise en cache.

Voici une fonction réutilisable

export function cacheable<T>(o: Observable<T>): Observable<T> {
  let replay = new ReplaySubject<T>(1);
  o.subscribe(
    x => replay.next(x),
    x => replay.error(x),
    () => replay.complete()
  );
  return replay.asObservable();
}

Voici comment l'utiliser

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { cacheable } from '../utils/rxjs-functions';

@Injectable()
export class SettingsService {
  _cache: Observable<any>;
  constructor(private _http: Http, ) { }

  refresh = () => {
    if (this._cache) {
      return this._cache;
    }
    return this._cache = cacheable<any>(this._http.get('YOUR URL'));
  }
}

Vous trouverez ci-dessous une version plus avancée de la fonction pouvant être mise en cache. Celle-ci permet d'avoir sa propre table de recherche + la possibilité de fournir une table de recherche personnalisée. De cette façon, vous n'avez pas à vérifier this._cache comme dans l'exemple ci-dessus. Notez également qu'au lieu de passer l'observable comme premier argument, vous passez une fonction qui renvoie les observables, c'est parce que le Http d'Angular s'exécute immédiatement, donc en retournant une fonction exécutée paresseuse, nous pouvons décider de ne pas l'appeler si elle est déjà dans notre cache.

let cacheableCache: { [key: string]: Observable<any> } = {};
export function cacheable<T>(returnObservable: () => Observable<T>, key?: string, customCache?: { [key: string]: Observable<T> }): Observable<T> {
  if (!!key && (customCache || cacheableCache)[key]) {
    return (customCache || cacheableCache)[key] as Observable<T>;
  }
  let replay = new ReplaySubject<T>(1);
  returnObservable().subscribe(
    x => replay.next(x),
    x => replay.error(x),
    () => replay.complete()
  );
  let observable = replay.asObservable();
  if (!!key) {
    if (!!customCache) {
      customCache[key] = observable;
    } else {
      cacheableCache[key] = observable;
    }
  }
  return observable;
}

Usage:

getData() => cacheable(this._http.get("YOUR URL"), "this is key for my cache")

rxjs 5.4.0 a une nouvelle méthode shareReplay .

• rx-book shareReplay ()
• Aucun document sur reactivex.io/rxjs

L'auteur dit explicitement "idéal pour gérer des choses comme la mise en cache des résultats AJAX"

rxjs PR # 2443 feat (shareReplay): ajoute une shareReplayvariante depublishReplay

shareReplay renvoie un observable qui est la source multidiffusée sur un ReplaySubject. Ce sujet de relecture est recyclé en cas d'erreur de la source, mais pas à la fin de la source. Cela rend shareReplay idéal pour gérer des choses comme la mise en cache des résultats AJAX, car il est possible de réessayer. Son comportement de répétition, cependant, diffère du partage en ce qu'il ne répétera pas la source observable, il répétera plutôt les valeurs de la source observable.

selon cet article

Il s'avère que nous pouvons facilement ajouter la mise en cache à l'observable en ajoutant publishReplay (1) et refCount.

donc à l' intérieur si les déclarations ne font qu'ajouter

.publishReplay(1)
.refCount();

à .map(...)

rxjs version 5.4.0 (2017-05-09) ajoute la prise en charge de shareReplay .

Pourquoi utiliser shareReplay?

Vous souhaitez généralement utiliser shareReplay lorsque vous avez des effets secondaires ou des calculs fiscaux que vous ne souhaitez pas exécuter entre plusieurs abonnés. Il peut également être utile dans les situations où vous savez que vous aurez des abonnés tardifs à un flux qui ont besoin d'accéder aux valeurs précédemment émises. Cette capacité à rejouer les valeurs lors de l'abonnement est ce qui différencie share et shareReplay.

Vous pouvez facilement modifier un service angulaire pour l'utiliser et renvoyer un observable avec un résultat mis en cache qui ne fera que l'appel http une seule fois (en supposant que le premier appel a réussi).

Exemple de service angulaire

Voici un service client très simple qui utilise shareReplay.

customer.service.ts

import { shareReplay } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class CustomerService {

    private readonly _getCustomers: Observable<ICustomer[]>;

    constructor(private readonly http: HttpClient) {
        this._getCustomers = this.http.get<ICustomer[]>('/api/customers/').pipe(shareReplay());
    }

    getCustomers() : Observable<ICustomer[]> {
        return this._getCustomers;
    }
}

export interface ICustomer {
  /* ICustomer interface fields defined here */
}

Notez que l'affectation dans le constructeur peut être déplacée vers la méthode, getCustomersmais comme les observables retournés HttpClientsont "à froid", le faire dans le constructeur est acceptable car l'appel http ne sera effectué que lors du premier appel à subscribe.

L'hypothèse ici est également que les données retournées initiales ne sont pas périmées pendant la durée de vie de l'instance d'application.

J'ai mis la question en vedette, mais je vais essayer de l'essayer.

//this will be the shared observable that 
//anyone can subscribe to, get the value, 
//but not cause an api request
let customer$ = new Rx.ReplaySubject(1);

getCustomer().subscribe(customer$);

//here's the first subscriber
customer$.subscribe(val => console.log('subscriber 1: ' + val));

//here's the second subscriber
setTimeout(() => {
  customer$.subscribe(val => console.log('subscriber 2: ' + val));  
}, 1000);

function getCustomer() {
  return new Rx.Observable(observer => {
    console.log('api request');
    setTimeout(() => {
      console.log('api response');
      observer.next('customer object');
      observer.complete();
    }, 500);
  });
}

Voici la preuve :)

Il n'y a qu'un seul plat à emporter: getCustomer().subscribe(customer$)

Nous ne souscrivons pas à la réponse api de getCustomer(), nous souscrivons à un ReplaySubject qui est observable qui est également capable de s'abonner à un autre Observable et (et c'est important) de conserver sa dernière valeur émise et de la republier à l'un de ses (ReplaySubject's ) les abonnés.

J'ai trouvé un moyen de stocker le résultat http get dans sessionStorage et de l'utiliser pour la session, afin qu'il n'appelle plus jamais le serveur.

Je l'ai utilisé pour appeler l'API github pour éviter la limite d'utilisation.

@Injectable()
export class HttpCache {
  constructor(private http: Http) {}

  get(url: string): Observable<any> {
    let cached: any;
    if (cached === sessionStorage.getItem(url)) {
      return Observable.of(JSON.parse(cached));
    } else {
      return this.http.get(url)
        .map(resp => {
          sessionStorage.setItem(url, resp.text());
          return resp.json();
        });
    }
  }
}

Pour info, la limite de sessionStorage est de 5M (ou 4.75M). Il ne doit donc pas être utilisé comme ceci pour un grand ensemble de données.

------ edit -------------
Si vous voulez avoir des données actualisées avec F5, qui utilise des données de mémoire au lieu de sessionStorage;

@Injectable()
export class HttpCache {
  cached: any = {};  // this will store data
  constructor(private http: Http) {}

  get(url: string): Observable<any> {
    if (this.cached[url]) {
      return Observable.of(this.cached[url]));
    } else {
      return this.http.get(url)
        .map(resp => {
          this.cached[url] = resp.text();
          return resp.json();
        });
    }
  }
}

L'implémentation que vous choisirez dépendra si vous souhaitez que unsubscribe () annule ou non votre requête HTTP.

Dans tous les cas, les décorateurs TypeScript sont un bon moyen de normaliser le comportement. Voici celui que j'ai écrit:

  @CacheObservableArgsKey
  getMyThing(id: string): Observable<any> {
    return this.http.get('things/'+id);
  }

Définition du décorateur:

/**
 * Decorator that replays and connects to the Observable returned from the function.
 * Caches the result using all arguments to form a key.
 * @param target
 * @param name
 * @param descriptor
 * @returns {PropertyDescriptor}
 */
export function CacheObservableArgsKey(target: Object, name: string, descriptor: PropertyDescriptor) {
  const originalFunc = descriptor.value;
  const cacheMap = new Map<string, any>();
  descriptor.value = function(this: any, ...args: any[]): any {
    const key = args.join('::');

    let returnValue = cacheMap.get(key);
    if (returnValue !== undefined) {
      console.log(`${name} cache-hit ${key}`, returnValue);
      return returnValue;
    }

    returnValue = originalFunc.apply(this, args);
    console.log(`${name} cache-miss ${key} new`, returnValue);
    if (returnValue instanceof Observable) {
      returnValue = returnValue.publishReplay(1);
      returnValue.connect();
    }
    else {
      console.warn('CacheHttpArgsKey: value not an Observable cannot publishReplay and connect', returnValue);
    }
    cacheMap.set(key, returnValue);
    return returnValue;
  };

  return descriptor;
}

Données de réponse HTTP pouvant être mises en cache à l'aide de Rxjs Observer / Observable + Caching + Subscription

Voir le code ci-dessous

* Avertissement: Je suis nouveau sur rxjs, alors gardez à l'esprit que je peux mal utiliser l'approche observable / observateur. Ma solution est purement un conglomérat d'autres solutions que j'ai trouvées, et est la conséquence d'avoir échoué à trouver une solution simple et bien documentée. Ainsi, je fournis ma solution de code complète (comme j'aurais aimé la trouver) dans l'espoir qu'elle aide les autres.

* notez que cette approche est vaguement basée sur GoogleFirebaseObservables. Malheureusement, je manque d'expérience / de temps pour reproduire ce qu'ils ont fait sous le capot. Mais ce qui suit est un moyen simpliste de fournir un accès asynchrone à certaines données pouvant être mises en cache.

Situation : un composant «liste de produits» est chargé d'afficher une liste de produits. Le site est une application Web d'une seule page avec quelques boutons de menu qui «filtreront» les produits affichés sur la page.

Solution : le composant "s'abonne" à une méthode de service. La méthode de service renvoie un tableau d'objets de produit, auquel le composant accède via le rappel d'abonnement. La méthode de service encapsule son activité dans un Observateur nouvellement créé et renvoie l'observateur. À l'intérieur de cet observateur, il recherche les données mises en cache et les retransmet à l'abonné (le composant) et retourne. Sinon, il émet un appel http pour récupérer les données, s'abonne à la réponse, où vous pouvez traiter ces données (par exemple, mapper les données à votre propre modèle), puis transmettre les données à l'abonné.

Le code

product-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ProductService } from '../../../services/product.service';
import { Product, ProductResponse } from '../../../models/Product';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
  products: Product[];

  constructor(
    private productService: ProductService
  ) { }

  ngOnInit() {
    console.log('product-list init...');
    this.productService.getProducts().subscribe(products => {
      console.log('product-list received updated products');
      this.products = products;
    });
  }
}

product.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Observer } from 'rxjs';
import 'rxjs/add/operator/map';
import { Product, ProductResponse } from '../models/Product';

@Injectable()
export class ProductService {
  products: Product[];

  constructor(
    private http:Http
  ) {
    console.log('product service init.  calling http to get products...');

  }

  getProducts():Observable<Product[]>{
    //wrap getProducts around an Observable to make it async.
    let productsObservable$ = Observable.create((observer: Observer<Product[]>) => {
      //return products if it was previously fetched
      if(this.products){
        console.log('## returning existing products');
        observer.next(this.products);
        return observer.complete();

      }
      //Fetch products from REST API
      console.log('** products do not yet exist; fetching from rest api...');
      let headers = new Headers();
      this.http.get('http://localhost:3000/products/',  {headers: headers})
      .map(res => res.json()).subscribe((response:ProductResponse) => {
        console.log('productResponse: ', response);
        let productlist = Product.fromJsonList(response.products); //convert service observable to product[]
        this.products = productlist;
        observer.next(productlist);
      });
    }); 
    return productsObservable$;
  }
}

product.ts (le modèle)

export interface ProductResponse {
  success: boolean;
  msg: string;
  products: Product[];
}

export class Product {
  product_id: number;
  sku: string;
  product_title: string;
  ..etc...

  constructor(product_id: number,
    sku: string,
    product_title: string,
    ...etc...
  ){
    //typescript will not autoassign the formal parameters to related properties for exported classes.
    this.product_id = product_id;
    this.sku = sku;
    this.product_title = product_title;
    ...etc...
  }



  //Class method to convert products within http response to pure array of Product objects.
  //Caller: product.service:getProducts()
  static fromJsonList(products:any): Product[] {
    let mappedArray = products.map(Product.fromJson);
    return mappedArray;
  }

  //add more parameters depending on your database entries and constructor
  static fromJson({ 
      product_id,
      sku,
      product_title,
      ...etc...
  }): Product {
    return new Product(
      product_id,
      sku,
      product_title,
      ...etc...
    );
  }
}

Voici un exemple de la sortie que je vois lorsque je charge la page dans Chrome. Notez qu'à la charge initiale, les produits sont récupérés depuis http (appel à mon service de repos de noeud, qui s'exécute localement sur le port 3000). Lorsque je clique ensuite pour accéder à une vue «filtrée» des produits, les produits sont trouvés dans le cache.

Mon journal Chrome (console):

core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
app.component.ts:19 app.component url: /products
product.service.ts:15 product service init.  calling http to get products...
product-list.component.ts:18 product-list init...
product.service.ts:29 ** products do not yet exist; fetching from rest api...
product.service.ts:33 productResponse:  {success: true, msg: "Products found", products: Array(23)}
product-list.component.ts:20 product-list received updated products

... [cliqué sur un bouton de menu pour filtrer les produits] ...

app.component.ts:19 app.component url: /products/chocolatechip
product-list.component.ts:18 product-list init...
product.service.ts:24 ## returning existing products
product-list.component.ts:20 product-list received updated products

Conclusion: C'est la manière la plus simple que j'ai trouvée (jusqu'à présent) pour implémenter des données de réponse http pouvant être mises en cache. Dans mon application angulaire, chaque fois que je navigue vers une vue différente des produits, le composant de la liste de produits se recharge. ProductService semble être une instance partagée, donc le cache local de «products: Product []» dans ProductService est conservé pendant la navigation, et les appels ultérieurs à «GetProducts ()» renvoient la valeur mise en cache. Une dernière note, j'ai lu des commentaires sur la façon dont les observables / abonnements doivent être fermés lorsque vous avez terminé pour éviter les «fuites de mémoire». Je ne l'ai pas inclus ici, mais c'est quelque chose à garder à l'esprit.

Je suppose que @ ngx-cache / core pourrait être utile pour maintenir les fonctionnalités de mise en cache pour les appels http, en particulier si l'appel HTTP est effectué à la fois sur les plates-formes de navigateur et de serveur .

Disons que nous avons la méthode suivante:

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

Vous pouvez utiliser le Cacheddécorateur de @ ngx-cache / core pour stocker la valeur renvoyée par la méthode faisant l'appel HTTP sur le cache storage( le storagepeut être configurable, veuillez vérifier l'implémentation sur ng-seed / universal ) - dès la première exécution. La prochaine fois que la méthode est invoquée (quel que soit le navigateur ou la plate-forme de serveur ), la valeur est récupérée à partir du 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());
}

Il y a aussi la possibilité de méthodes de mise en cache d'utilisation ( has, get, set) en utilisant l' API de mise en cache .

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

Voici la liste des packages, pour la mise en cache côté client et côté serveur:

• @ ngx-cache / core : utilitaire de cache
• @ ngx-cache / platform-browser : implémentation de la plateforme SPA / Browser
• @ ngx-cache / platform-server : implémentation de la plateforme serveur
• @ ngx-cache / fs-storage : utilitaire de stockage (requis pour la plate-forme serveur)

rxjs 5.3.0

Je ne suis pas content .map(myFunction).publishReplay(1).refCount()

Avec plusieurs abonnés, .map()exécutemyFunction deux fois dans certains cas (je m'attends à ce qu'il ne s'exécute qu'une seule fois). Une solution semble êtrepublishReplay(1).refCount().take(1)

Une autre chose que vous pouvez faire est simplement de ne pas utiliser refCount()et de rendre l'Observable chaud tout de suite:

let obs = this.http.get('my/data.json').publishReplay(1);
obs.connect();
return obs;

Cela lancera la requête HTTP indépendamment des abonnés. Je ne sais pas si la désinscription avant la fin de HTTP GET l'annulera ou non.

Ce que nous voulons faire, c'est nous assurer que cela ne provoque pas de multiples requêtes réseau.

Mon préféré est d'utiliser des asyncméthodes pour les appels qui font des requêtes réseau. Les méthodes elles-mêmes ne renvoient pas de valeur, mais elles mettent à jour un BehaviorSubjectdans le même service, auquel les composants s'abonneront.

Maintenant, pourquoi utiliser un BehaviorSubjectau lieu d'un Observable? Car,

• Lors de l'abonnement, BehaviorSubject renvoie la dernière valeur, tandis qu'un observable normal ne se déclenche que lorsqu'il reçoit un onnext .
• Si vous souhaitez récupérer la dernière valeur du BehaviorSubject dans un code non observable (sans abonnement), vous pouvez utiliser la getValue()méthode.

Exemple:

customer.service.ts

public customers$: BehaviorSubject<Customer[]> = new BehaviorSubject([]);

public async getCustomers(): Promise<void> {
    let customers = await this.httpClient.post<LogEntry[]>(this.endPoint, criteria).toPromise();
    if (customers) 
        this.customers$.next(customers);
}

Ensuite, lorsque cela est nécessaire, nous pouvons simplement nous abonner customers$.

public ngOnInit(): void {
    this.customerService.customers$
    .subscribe((customers: Customer[]) => this.customerList = customers);
}

Ou peut-être souhaitez-vous l'utiliser directement dans un modèle

<li *ngFor="let customer of customerService.customers$ | async"> ... </li>

Alors maintenant, jusqu'à ce que vous fassiez un autre appel à getCustomers, les données sont conservées dans le customers$BehaviorSubject.

Et si vous souhaitez actualiser ces données? il suffit d'appelergetCustomers()

public async refresh(): Promise<void> {
    try {
      await this.customerService.getCustomers();
    } 
    catch (e) {
      // request failed, handle exception
      console.error(e);
    }
}

En utilisant cette méthode, nous n'avons pas à conserver explicitement les données entre les appels réseau suivants car elles sont gérées par le BehaviorSubject.

PS: Habituellement, lorsqu'un composant est détruit, il est recommandé de se débarrasser des abonnements, pour cela, vous pouvez utiliser la méthode suggérée dans cette réponse.

Excellentes réponses.

Ou vous pouvez le faire:

Il s'agit de la dernière version de rxjs. J'utilise la version 5.5.7 de RxJS

import {share} from "rxjs/operators";

this.http.get('/someUrl').pipe(share());

Appelez simplement share () après la carte et avant de vous abonner .

Dans mon cas, j'ai un service générique (RestClientService.ts) qui fait le reste, extrait les données, vérifie les erreurs et renvoie observable à un service d'implémentation concret (ex: ContractClientService.ts), enfin cette implémentation concrète renvoie observable à de ContractComponent.ts, et celui-ci s'abonne pour mettre à jour la vue.

RestClientService.ts:

export abstract class RestClientService<T extends BaseModel> {

      public GetAll = (path: string, property: string): Observable<T[]> => {
        let fullPath = this.actionUrl + path;
        let observable = this._http.get(fullPath).map(res => this.extractData(res, property));
        observable = observable.share();  //allows multiple subscribers without making again the http request
        observable.subscribe(
          (res) => {},
          error => this.handleError2(error, "GetAll", fullPath),
          () => {}
        );
        return observable;
      }

  private extractData(res: Response, property: string) {
    ...
  }
  private handleError2(error: any, method: string, path: string) {
    ...
  }

}

ContractService.ts:

export class ContractService extends RestClientService<Contract> {
  private GET_ALL_ITEMS_REST_URI_PATH = "search";
  private GET_ALL_ITEMS_PROPERTY_PATH = "contract";
  public getAllItems(): Observable<Contract[]> {
    return this.GetAll(this.GET_ALL_ITEMS_REST_URI_PATH, this.GET_ALL_ITEMS_PROPERTY_PATH);
  }

}

ContractComponent.ts:

export class ContractComponent implements OnInit {

  getAllItems() {
    this.rcService.getAllItems().subscribe((data) => {
      this.items = data;
   });
  }

}

J'ai écrit une classe de cache,

/**
 * Caches results returned from given fetcher callback for given key,
 * up to maxItems results, deletes the oldest results when full (FIFO).
 */
export class StaticCache
{
    static cachedData: Map<string, any> = new Map<string, any>();
    static maxItems: number = 400;

    static get(key: string){
        return this.cachedData.get(key);
    }

    static getOrFetch(key: string, fetcher: (string) => any): any {
        let value = this.cachedData.get(key);

        if (value != null){
            console.log("Cache HIT! (fetcher)");
            return value;
        }

        console.log("Cache MISS... (fetcher)");
        value = fetcher(key);
        this.add(key, value);
        return value;
    }

    static add(key, value){
        this.cachedData.set(key, value);
        this.deleteOverflowing();
    }

    static deleteOverflowing(): void {
        if (this.cachedData.size > this.maxItems) {
            this.deleteOldest(this.cachedData.size - this.maxItems);
        }
    }

    /// A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.
    /// However that seems not to work. Trying with forEach.
    static deleteOldest(howMany: number): void {
        //console.debug("Deleting oldest " + howMany + " of " + this.cachedData.size);
        let iterKeys = this.cachedData.keys();
        let item: IteratorResult<string>;
        while (howMany-- > 0 && (item = iterKeys.next(), !item.done)){
            //console.debug("    Deleting: " + item.value);
            this.cachedData.delete(item.value); // Deleting while iterating should be ok in JS.
        }
    }

    static clear(): void {
        this.cachedData = new Map<string, any>();
    }

}

Tout est statique en raison de la façon dont nous l'utilisons, mais n'hésitez pas à en faire une classe et un service normaux. Je ne sais pas si angular conserve une seule instance pendant tout le temps (nouveau pour Angular2).

Et voici comment je l'utilise:

            let httpService: Http = this.http;
            function fetcher(url: string): Observable<any> {
                console.log("    Fetching URL: " + url);
                return httpService.get(url).map((response: Response) => {
                    if (!response) return null;
                    if (typeof response.json() !== "array")
                        throw new Error("Graph REST should return an array of vertices.");
                    let items: any[] = graphService.fromJSONarray(response.json(), httpService);
                    return array ? items : items[0];
                });
            }

            // If data is a link, return a result of a service call.
            if (this.data[verticesLabel][name]["link"] || this.data[verticesLabel][name]["_type"] == "link")
            {
                // Make an HTTP call.
                let url = this.data[verticesLabel][name]["link"];
                let cachedObservable: Observable<any> = StaticCache.getOrFetch(url, fetcher);
                if (!cachedObservable)
                    throw new Error("Failed loading link: " + url);
                return cachedObservable;
            }

Je suppose qu'il pourrait y avoir un moyen plus intelligent, qui utiliserait quelques Observableastuces, mais c'était très bien pour mes besoins.

Utilisez simplement cette couche de cache, elle fait tout ce dont vous avez besoin et gère même le cache pour les requêtes ajax.

http://www.ravinderpayal.com/blogs/12Jan2017-Ajax-Cache-Mangement-Angular2-Service.html

C'est tellement simple à utiliser

@Component({
    selector: 'home',
    templateUrl: './html/home.component.html',
    styleUrls: ['./css/home.component.css'],
})
export class HomeComponent {
    constructor(AjaxService:AjaxService){
        AjaxService.postCache("/api/home/articles").subscribe(values=>{console.log(values);this.articles=values;});
    }

    articles={1:[{data:[{title:"first",sort_text:"description"},{title:"second",sort_text:"description"}],type:"Open Source Works"}]};
}

La couche (en tant que service angulaire injectable) est

import { Injectable }     from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import './../rxjs/operator'
@Injectable()
export class AjaxService {
    public data:Object={};
    /*
    private dataObservable:Observable<boolean>;
     */
    private dataObserver:Array<any>=[];
    private loading:Object={};
    private links:Object={};
    counter:number=-1;
    constructor (private http: Http) {
    }
    private loadPostCache(link:string){
     if(!this.loading[link]){
               this.loading[link]=true;
               this.links[link].forEach(a=>this.dataObserver[a].next(false));
               this.http.get(link)
                   .map(this.setValue)
                   .catch(this.handleError).subscribe(
                   values => {
                       this.data[link] = values;
                       delete this.loading[link];
                       this.links[link].forEach(a=>this.dataObserver[a].next(false));
                   },
                   error => {
                       delete this.loading[link];
                   }
               );
           }
    }

    private setValue(res: Response) {
        return res.json() || { };
    }

    private handleError (error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

    postCache(link:string): Observable<Object>{

         return Observable.create(observer=> {
             if(this.data.hasOwnProperty(link)){
                 observer.next(this.data[link]);
             }
             else{
                 let _observable=Observable.create(_observer=>{
                     this.counter=this.counter+1;
                     this.dataObserver[this.counter]=_observer;
                     this.links.hasOwnProperty(link)?this.links[link].push(this.counter):(this.links[link]=[this.counter]);
                     _observer.next(false);
                 });
                 this.loadPostCache(link);
                 _observable.subscribe(status=>{
                     if(status){
                         observer.next(this.data[link]);
                     }
                     }
                 );
             }
            });
        }
}

C'est .publishReplay(1).refCount();ou .publishLast().refCount();puisque les observables Angular Http se terminent après la demande.

Cette classe simple met en cache le résultat afin que vous puissiez vous abonner à .value plusieurs fois et ne faire qu'une seule demande. Vous pouvez également utiliser .reload () pour effectuer une nouvelle demande et publier des données.

Vous pouvez l'utiliser comme:

let res = new RestResource(() => this.http.get('inline.bundleo.js'));

res.status.subscribe((loading)=>{
    console.log('STATUS=',loading);
});

res.value.subscribe((value) => {
  console.log('VALUE=', value);
});

et la source:

export class RestResource {

  static readonly LOADING: string = 'RestResource_Loading';
  static readonly ERROR: string = 'RestResource_Error';
  static readonly IDLE: string = 'RestResource_Idle';

  public value: Observable<any>;
  public status: Observable<string>;
  private loadStatus: Observer<any>;

  private reloader: Observable<any>;
  private reloadTrigger: Observer<any>;

  constructor(requestObservableFn: () => Observable<any>) {
    this.status = Observable.create((o) => {
      this.loadStatus = o;
    });

    this.reloader = Observable.create((o: Observer<any>) => {
      this.reloadTrigger = o;
    });

    this.value = this.reloader.startWith(null).switchMap(() => {
      if (this.loadStatus) {
        this.loadStatus.next(RestResource.LOADING);
      }
      return requestObservableFn()
        .map((res) => {
          if (this.loadStatus) {
            this.loadStatus.next(RestResource.IDLE);
          }
          return res;
        }).catch((err)=>{
          if (this.loadStatus) {
            this.loadStatus.next(RestResource.ERROR);
          }
          return Observable.of(null);
        });
    }).publishReplay(1).refCount();
  }

  reload() {
    this.reloadTrigger.next(null);
  }

}

Vous pouvez créer une classe simple Cacheable <> qui aide à gérer les données récupérées du serveur http avec plusieurs abonnés:

declare type GetDataHandler<T> = () => Observable<T>;

export class Cacheable<T> {

    protected data: T;
    protected subjectData: Subject<T>;
    protected observableData: Observable<T>;
    public getHandler: GetDataHandler<T>;

    constructor() {
      this.subjectData = new ReplaySubject(1);
      this.observableData = this.subjectData.asObservable();
    }

    public getData(): Observable<T> {
      if (!this.getHandler) {
        throw new Error("getHandler is not defined");
      }
      if (!this.data) {
        this.getHandler().map((r: T) => {
          this.data = r;
          return r;
        }).subscribe(
          result => this.subjectData.next(result),
          err => this.subjectData.error(err)
        );
      }
      return this.observableData;
    }

    public resetCache(): void {
      this.data = null;
    }

    public refresh(): void {
      this.resetCache();
      this.getData();
    }

}

Usage

Déclarez l'objet Cacheable <> (probablement dans le cadre du service):

list: Cacheable<string> = new Cacheable<string>();

et gestionnaire:

this.list.getHandler = () => {
// get data from server
return this.http.get(url)
.map((r: Response) => r.json() as string[]);
}

Appel depuis un composant:

//gets data from server
List.getData().subscribe(…)

Vous pouvez y souscrire plusieurs composants.

Plus de détails et un exemple de code sont ici: http://devinstance.net/articles/20171021/rxjs-cacheable

Vous pouvez simplement utiliser ngx-cacheable ! Cela convient mieux à votre scénario.

L'avantage d'utiliser ce

• Il n'appelle l'API de repos qu'une seule fois, met en cache la réponse et renvoie la même chose pour les demandes suivantes.
• Peut appeler l'API selon les besoins après l'opération de création / mise à jour / suppression.

Donc, votre classe de service serait quelque chose comme ça -

import { Injectable } from '@angular/core';
import { Cacheable, CacheBuster } from 'ngx-cacheable';

const customerNotifier = new Subject();

@Injectable()
export class customersService {

    // relieves all its caches when any new value is emitted in the stream using notifier
    @Cacheable({
        cacheBusterObserver: customerNotifier,
        async: true
    })
    getCustomer() {
        return this.http.get('/someUrl').map(res => res.json());
    }

    // notifies the observer to refresh the data
    @CacheBuster({
        cacheBusterNotifier: customerNotifier
    })
    addCustomer() {
        // some code
    }

    // notifies the observer to refresh the data
    @CacheBuster({
        cacheBusterNotifier: customerNotifier
    })
    updateCustomer() {
        // some code
    }
}

Voici le lien pour plus de référence.

Avez-vous essayé d'exécuter le code que vous avez déjà?

Parce que vous construisez l'Observable à partir de la promesse qui en résulte getJSON(), la demande réseau est effectuée avant que quiconque ne s'abonne. Et la promesse qui en résulte est partagée par tous les abonnés.

var promise = jQuery.getJSON(requestUrl); // network call is executed now
var o = Rx.Observable.fromPromise(promise); // just wraps it in an observable
o.subscribe(...); // does not trigger network call
o.subscribe(...); // does not trigger network call
// ...