[英]RxJS - Conditionally add observable in a pipe
所以我有一个像下面这样的功能
showLoader = () => <T>(source: Observable<T>) => {
LoaderService.loadPage.next(true);
return source.pipe(
finalize(() => {
LoaderService.loadPage.next(false);
})
);
};
然后我在进行如下 HTTP 调用时使用它
return this.http.get(url).pipe(showLoader())
但是假设我遇到了一个场景,我需要加载器或任何基于条件的可观察对象; 像下面这样的东西
const loader : boolean = false
return this.http.get(url).pipe(concat(...), loader ? showLoader() : of(values))
我尝试使用iif
运算符,如下所示
const loader : boolean = false
return this.http.get(url).pipe(concat(...), mergeMap(v => iif(() => loader, showLoader(), of(v))))
并得到以下错误
TS2345:“(来源:Observable)=> Observable”类型的参数不可分配给“SubscribableOrPromise<{}>”类型的参数。
有人能帮我理解我哪里出错了以及如何纠正它
你可以这样做:
showLoader = (show: boolean = true) => <T>(source: Observable<T>) => {
if (!show) { // just go straight to source
return source;
}
return defer(() => { // defer makes sure you don't show the loader till actually subscribed
LoaderService.loadPage.next(true);
return source.pipe(
finalize(() => {
LoaderService.loadPage.next(false);
})
)
})
};
用:
return this.http.get(url).pipe(showLoader(false))
但是您似乎静态访问LoaderService
的方式在您的未来充满了设计问题和错误。 供参考。
我建议如下:
const startWithTap = (callback: () => void) =>
<T>(source: Observable<T>) => of({}).pipe(
startWith(callback),
switchMap(() => source)
);
const showLoader = () => <T>(source: Observable<T>) => concat(
iif(
() => loader,
source.pipe(
startWithTap(() => LoaderService.loadPage.next(true)),
finalize(() => {
LoaderService.loadPage.next(false);
})
),
EMPTY
), source);
return this.http.get(url).pipe(
showLoader()
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.