Angular RxJS阻止双API调用

Question

我想重新使用RxJS流的结果而不再执行它。

在一个组件中我必须Input（）流：query$和category$。我想将它转换为共享相同API源的两个流。现在它提出两个请求。我只想要一个请求。

简化代码：

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

我消耗都SearchResult所$和$ filteredSearchResults在同一组件：

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

现在我明白为什么有两个API调用。我只是没有看到任何方法来阻止它。

Answer 1

您可能需要使用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']; 
    });