2017-10-20 8 views
0

Je souhaite réutiliser le résultat d'un flux RxJS sans l'exécuter à nouveau.Angular RxJS empêche les appels d'API doubles

Dans un composant, j'ai des flux Input(): query$ et category$. Je veux convertir cela en deux flux qui partagent la même source d'API. En ce moment, il fait deux demandes. Je voudrais avoir une seule demande.

Code simplifié:

this.searchResults$ = this.query$ 
    .switchMap((query) => this.httpClient.get(`/whatever?q=${query}`)); 

this.filteredSearchResults$ = Observable 
    .combineLatest(this.searchResults$, this.category$) 
    .filter(([ searchResults, category ]) => { 
    // Code to make a subset 

    return ['a', 'subset']; 
    }); 

Je consomme deux searchResults $ et filteredSearchResults $ dans le même composant:

<ng-container *ngIf="(searchResults$ | async) as searchResults"> 
    <ng-container *ngIf="(filteredSearchResults$ | async) as filteredSearchResults"> 
    </ng-container> 
</ng-container> 

Maintenant, je comprends pourquoi il y a deux appels API. Je ne vois aucun moyen de l'empêcher.

Répondre

0

Vous pouvez utiliser share:

this.searchResults$ = this.query$ 
    .switchMap((query) => this.httpClient.get(`/whatever?q=${query}`)) 
    .share(); <-- HERE 

this.filteredSearchResults$ = Observable 
    .combineLatest(this.searchResults$, this.category$) 
    .filter(([ searchResults, category ]) => { 
    // Code to make a subset 

    return ['a', 'subset']; 
    }); 
+0

Il travaille maintenant en partie. Sur pageload les deux flux fonctionnent comme prévu. Mais dès qu'une des requêtes $ ou category $ change, j'obtiens une requête supplémentaire avec les anciennes valeurs. Ainsi qu'une demande normale avec les nouvelles valeurs. –