如何解决包装rxjs可以观察到前后的操作例如显示/隐藏加载屏幕
我正在尝试创建包装给定Observable的函数,并为其添加加载屏幕。
函数function wrapWithLoadingScreen<T>(obs$: Observable<T>): Observable<T>
的工作方式应为:
- 显示加载屏幕。
- 执行可观察到的参数
- 发出所有值后隐藏加载屏幕。
我最初的实现想法是:
function wrapWithLoadingScreen<T>(obs$: Observable<T>): Observable<T> {
return of(null).pipe(
tap(() => console.log("show loading screen")),switchMap(() => obs$),finalize(() => console.log("hide loading screen"))
);
}
但是当我将其他运算符链接到该函数的结果时,则在这些链接之后执行“隐藏加载屏幕”(而不是在原始可观察的完成之后)。
这里是一个示例:https://stackblitz.com/edit/rxjs-wrapping-observable
上面的控制台中的结果是
show loading screen
im reducing
im reducing
reducing finished so loading screen should be hidden
the result is 6
hide loading screen
我的目标应该是
show loading screen
im reducing
im reducing
hide loading screen
reducing finished so loading screen should be hidden
the result is 6
解决方法
这是因为finalize
是在拆解之后执行的,请参阅此GitHub Issue以获取更多信息。这意味着即使您在链的中间使用finalize
,甚至在reduce
和mergeMap
之前,它也会在拆卸过程中最后执行。
对于您的问题的替代解决方案,您可以像这样使用tap
:
function wrapWithLoadingScreen<T>(obs$: Observable<T>): Observable<T> {
return of(null).pipe(
tap(() => console.log("show loading screen")),switchMap(() => obs$),tap(
() => {},() => console.log("hide loading screen"),() => console.log("hide loading screen")
),);
}
除了next
回调外,您还可以向error
运算符提供complete
和tap
回调。有关错误和完整的回调的更多信息,请参见RxJS Tap Doc。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。