CODEWITHSUNDEEP
javascriptangulartypescriptrxjsswitchmap
Ben Taliadoros
Ben Taliadoros

Reputation: 9331

SwitchMap not working as intended in Angular

I have a search service returning results, if the user submits twice, only the last search should return results.

I have the following code in a service, view (updated elsewhere) has all the post body info needed for the request.

This method is called from elsewhere in the code using this.searchService.getResults()

getResults() {
    const view: SearchView = this.getCurrentSearch();
    if (!view.query || view.query === '') {
      return;
    }

    this.checkPermissions(view).subscribe(searchView => {
     //do some stuff
     this.cacheService
       .cachedPost(this.url, searchView, () => {
        return this.http.post(this.url, searchView);
      })
      .switchMap(res => this.pageTransform(res))
      .subscribe(
        // results here
      );
   });
}

`

From running tests I can see that if I fire 3 searches in quick succession, they all resolve, whereas I only want the last to.

Upvotes: 3

Views: 6710

Answers (1)

martin
martin

Reputation: 96891

That's because you're calling the method getResults() multiple times which creates multiple Rx chains and all of them are processed. If you want switchMap to work correctly you need to keep a reference to only one chain and push values to it:

private search$ = new Subject();

private searchSubscription = search$
  .switchMap(view => this.checkPermissions(view)
    .concatMap(searchView => this.cacheService.cachedPost(this.url, searchView, () => {
      return this.http.post(this.url, searchView);
    })
    .concatMap(res => this.pageTransform(res))
  )
  .subscribe(...);

getResults() {
  const view: SearchView = this.getCurrentSearch();

  ...

  this.search$.next(view);
}

I didn't test this code for obvious reasons but I think you'll get the point. Also don't forget to unsubscribe in ngOnDestroy() with this.searchSubscription.unsubscribe().

Upvotes: 4

Related Questions