我正在处理在debounceTime()之后触发的用户名搜索输入。我也过滤掉值。如果值被过滤(例如设置错误消息和停止加载程序),我想触发一些副作用。
我现在通过使用tap()并检查相同的谓词(稍后在filter()函数中进行检查)来实现此目的。我觉得这很不好/有一种更合适的方法可以实现这一目标。
private setUserSearchObservable() {
this.userSearch = userSearch$.pipe(
tap(() => this.loading = true),
debounceTime(500),
this.filterValuesWithErrorMessages(),
......
);
}
private filterValuesWithErrorMessages() {
return pipe(
tap((val: string) => { if (this.usernamesMatch(val)) { this.errorMessage = 'You will be added to the frame automatically'; this.loading = false; }}),
tap((val: string) => { if (this.usernameInArray(val)) { this.errorMessage = 'User is already added'; this.loading = false; }}),
tap((val: string) => { if (val.length < 2) { this.errorMessage = ''; this.loading = false; }}),
filter((val: string) => (val.length >= 2 && !this.usernamesMatch(val) && !this.usernameInArray(val))),
);
}
如您所见,我在使用filter()之前,先使用tap()显式检查了完全相同的条件。是否有一个运算符/不同模式可以让我以更简洁的方式实现这一目标?
答案 0 :(得分:2)
稍微重构一下代码,没有特定的运算符来处理错误检查,您可以使用switchMap
和内部可观察的变量,例如of
,never
来控制结果是否应该通过。
private setUserSearchObservable() {
this.userSearch = userSearch$.pipe(
tap(() => this.loading = true),
debounceTime(500),
map((value) => this.filterValuesWithErrorMessages(value)),
swtichMap(msg => {
if (msg !== false) {
this.errorMessage = result
this.loading = false
return never()
}
return of(true)
})
);
}
private filterValuesWithErrorMessages(val) {
if (this.usernamesMatch(val)) return 'You will be added to the frame automatically'
if (this.usernameInArray(val)) return 'User is already added'
if (val.length < 2) return ''
return false
}