Angular / RxJS 6: Comment éviter les requêtes HTTP en double?

Question

Ont actuellement un scénario où une méthode au sein d'un service partagé est utilisée par plusieurs composants. Cette méthode effectue un appel HTTP vers un point de terminaison qui aura toujours la même réponse et renvoie un Observable. Est-il possible de partager la première réponse avec tous les abonnés pour éviter les requêtes HTTP en double?

Voici une version simplifiée du scénario décrit ci-dessus:

class SharedService {
  constructor(private http: HttpClient) {}

  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}

class Component1 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something...')
    );
  }
}

class Component2 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something different...')
    );
  }
}

Answer 1

Tard dans la soirée, mais j'ai créé un décorateur réutilisable spécifiquement pour répondre à ce cas d'utilisation. Comment se compare-t-elle aux autres solutions publiées ici?

• Il résume toute la logique standard en laissant le code de votre application propre
• Il gère les méthodes avec des arguments et assure de ne pas partager les appels à la méthode avec différents arguments.
• Il fournit un moyen de configurer when exactement comme vous souhaitez partager l'observable sous-jacent (voir la documentation).

Il est publié sous un parapluie que j'utiliserai pour divers utilitaires liés à Angular.

Installez-le:

npm install @ngspot/rxjs --save-dev

Utilisez-le:

import { Share } from '@ngspot/rxjs/decorators';

class SharedService {
  constructor(private http: HttpClient) {}

  @Share()
  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}