在我的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请求操作上,语法需要什么样?
最佳答案
我将尝试编写一个简化的示例,希望您能从中得到启发。您应该具有过滤器当前状态的主题。将其切换到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() }
关于javascript - 在Angular App中在POST请求上使用switchMap进行Observable,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49867511/