javascript - SwitchMap not working as intended in Angular - Stack Overflow

admin管理员组

文章数量:1426202

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.

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.

• javascript
• angular
• typescript
• rxjs
• switchmap

Share Improve this question Follow asked Mar 28, 2018 at 15:56 Ben TaliadorosBen Taliadoros 9,5811818 gold badges6767 silver badges106106 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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().

本文标签： javascriptSwitchMap not working as intended in AngularStack Overflow