在Angular App中在POST请求上使用switchMap进行Observable

Question

In my Angular app I have a function that takes in a variety of user-selected filter values, and returns data accordingly. These values are passed into the function via event emitters passing the values from one component to another, like so:

<data-list [records]="records"
    (sendLocation)="onFilterReceived($event, type = 'location')"
    (sendZipcode)="onFilterReceived($event, type = 'zipcode')"
    (sendFirstName)="onFilterReceived($event, type = 'firstName')"
    (sendLastName)="onFilterReceived($event, type = 'lastName')"
    (sendLanguage)="onFilterReceived($event, type = 'language')"
    (sendBranch)="onFilterReceived($event, type = 'branch')">
</data-list>

I then take in those values, process them, and then send out an POST request to the API to get the filtered data returned:

public onFilterReceived(value, type)
{
    let selections = this.filtersService.processByTypes(value, type);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
        }
    );

    let fn = resRecordsData => {
        this.records = resRecordsData;
        let data = resRecordsData.data;
    };

     this.filtersService.getByFilters(
        this.page - 1, this.pagesize, this.language = selections.language, this.location = selections.location,
        this.zipcode = selections.zipcode, this.firstName = selections.firstName, this.lastName = selections.lastName,
        this.branch = selections.branch, fn);
}

The filterService functions being called here look like this:

filters = { language: [], location: [], zipcode: [], firstName: [], lastName: [], branch: [] };

public processByTypes(value, type) {
  if (value && type) { this.filters[type] = value; }
  return this.filters;
}

public getByFilters(page, pagesize, language?, location?, zipcode?, firstName?, lastName?, branch?, fn?: any) {
    return this.apiService.post({
      req: this.strReq, reqArgs: { page, pagesize, stage, language, location, zipcode, firstName, lastName, branch }, callback: fn });
}

And the API POST function being called here looks like this:

public post(params: {
    req: string,
    reqArgs?: any,
    reqBody?: any,
    callback?: IRequestCallback
}): Observable<Response>
{
    params['reqType'] = 'post';

    return this.runHttpRequest(params);
}

The problem I'm running into is that each time a filter value is received by the onFilterReceived() function it causes the POST request to fire, so I end up with 7 or 8 POST requests for basically unchanged filter values. So what I want to do is gather those values and only make one POST request.

Right now the POST request returns an observable, so my thinking is that I should be able to use an operation like switchMap to handle this. Does this sound doable? That's question one. The second question is about getting the syntax right.

I tried chaining switchMap onto the end of the POST request like this:

public getByFilters(page, pagesize, stage?, language?, location?, zipcode?, firstName?, lastName?, branch?, fn?: any) {
    return this.apiService.post({
      req: this.strReq, reqArgs: { page, pagesize, stage, language, location, zipcode, firstName, lastName, branch }, callback: fn }).switchMap;
}

... but that didn't work. No errors, but it didn't work, because I still see multiple POST requests going out.

So am I understanding switchMap correctly? And what does the syntax need to look like if I want to chain it onto my POST request operation?

Answer 1

I'll try to write a simplified example from which you hopefully get the idea. You should have a Subject of the current state of filters. SwitchMap that to the api call and you can throw in debounceTime to give user time to make quick changes in succession.

Going to use the newer pipeable operators.

filter$:Subject<any> = new Subject();
data:any;
destroy$:Subject<void> = new Subject();

ngOnInit() {
    this.filter$.pipe(
        takeUntil(destroy$), // stop and cleanup when component gone
        debounceTime(400),
        switchMap(filter => this.service.post(filter)) // switch one stream to another
    ).subscribe(data => this.data = data)
}

onFilterReceived(value, type)
{
    let selections = this.filtersService.processByTypes(value, type);
    this.filter$.next(selections);
}

ngOnDestroy() { this.destroy$.next() }