在Angular App中在POST請求上使用switchMap進行Observable

Question

在我的Angular應用程序中，我具有一個函數，該函數接受各種用戶選擇的過濾器值，並相應地返回數據。 通過事件發射器將這些值從一個組件傳遞到另一個組件，將這些值傳遞到函數中，如下所示：

<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>

然后，我接受這些值，對其進行處理，然后向API發送POST請求以獲取返回的過濾數據：

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

在此處調用的filterService函數如下所示：

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

此處調用的API POST函數如下所示：

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

    return this.runHttpRequest(params);
}

我遇到的問題是，每次onFilterReceived（）函數接收到一個過濾器值時，都會觸發POST請求，因此對於基本未更改的過濾器值，我最終會收到7或8個POST請求。 所以我想做的就是收集這些值，並且只發出一個 POST請求。

現在POST請求返回一個可觀察到的消息，因此我的想法是我應該能夠使用switchMap之類的操作來處理此問題。 這聽起來可行嗎？ 這是第一個問題。 第二個問題是關於正確使用語法。

我嘗試將switchMap鏈接到POST請求的末尾，如下所示：

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;
}

...但是那沒有用。 沒有錯誤，但是沒有用，因為我仍然看到多個POST請求發出。

我能正確理解switchMap嗎？ 如果要將鏈鏈接到POST請求操作上，語法需要什么樣？

Answer 1

我將嘗試編寫一個簡化的示例，希望您能從中得到啟發。 您應該具有過濾器當前狀態的主題。 將其切換到api調用，您可以投入debounceTime來給用戶時間來快速進行連續更改。

將使用較新的管道運算符。

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