如何解决可观察状态对于用户界面
我正在尝试创建具有状态的可观察对象,以便能够在UI中显示负载。 CombineLatest可以正常工作,管道仅位于switchmap上,以防止在发生错误时关闭可观察的(combineLatest) 我找到了一个示例(this或this),该如何使用有状态可观察对象,但是我无法将两者合并,有什么帮助吗?
我的示例
combineLatest([
Observable_One,Observable_Two,Observable_Three,]).pipe(
switchMap(([R1,R2,R3]) =>
this.MyServiceWithPossibleError(...)
.pipe(catchError(() => { return EMPTY }))))
网络示例
export enum ObsevableStatus {
SUCCESS = 'Success',ERROR = 'Error',LOADING = 'Loading',}
export interface ObservableWithStatus<T> {
status: string;
data?: T;
error?: Error;
}
export function observableWithStatus<T>(x: Observable<T>): Observable<ObservableWithStatus<T>> {
return x.pipe(
map(x => ({ status: ObsevableStatus.SUCCESS,data: x })),startWith({ status: ObsevableStatus.LOADING }),catchError(x => {
return of({ status: ObsevableStatus.ERROR,error: x });
})
);
}
更新
- 如果“ Observable_One”,“ Observable_One”或“ Observable_Three”发出一些值,则显示加载
- 如果我的服务(MyWebServiceWithPossibleError)抛出一些错误,停止加载并显示消息,但未完成“ combineLatest”(可观察到的寿命很长),因此可以继续接收这3个可观察到的事件
- 如果没有错误,请隐藏加载并显示数据
目的不是要从字面上结合这两个示例,而是要同时构建一个示例。
更新2
getEntities$ = combineLatest([
Observable_One,]).pipe(
switchMap(
([R1,R3]) =>
concat(
of({ status: 'loading',value: '' }),this.MyServiceWithPossibleError$(...)
.pipe(map(x => ({ status: 'success',value: SERVICE_RESPONSE })),catchError(() => EMPTY))
)
)
)
<div *ngIf="getEntities$ | async as obs" [ngSwitch]="obs.status">
<div *ngSwitchCase="'success'">
Success! {{ obs.value }}
</div>
<div *ngSwitchCase="'error'">
Error
</div>
<div *ngSwitchCase="'loading'">
Loading!
</div>
</div>
解决方法
听起来您所缺少的只是您需要将错误映射到实际响应中,而不只是立即完成的空流
getEntities$ = combineLatest([
Observable_One,Observable_Two,Observable_Three
]).pipe(
switchMap(([R1,R2,R3]) =>
concat(
of({ status: 'loading',value: '' }),this.MyServiceWithPossibleError$(...).pipe(
map(x => ({
status: 'success',value: SERVICE_RESPONSE
})),catchError(err => of({
status: 'error',value: 'ERROR MESSAGE: ' + err.message
})),)
)
)
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。