我的问题的根源是在 http 请求上显示加载指示器,我想在服务级别上执行此操作,而不必为每个组件编写代码。我所做的是实现一个 http 包装器,它基本上执行以下操作:
getMyHttpObservable(...) {
setLoadingIndicator(true);
const myHttpObservable =
createRequestObservable().finally(()=> {
console.log('http done');
setLoadingIndicator(false);
});
return myHttpObservable;
}
我有一系列可观察值,我使用它们进行链接Observable.concat
如下:
const t1 = Observable.timer(5000).finally(()=>console.log('t1 done'));
const t2 = getMyHttpObservable(...);
const agg = Observable.concat(t1,t2);
我正在使用基于事件的取消技术Observable.takeUntil
如下:
const ev = new EventEmitter<any>();
const cancellableAgg = agg.takeUntil(ev.asObservable());
现在的问题是,当我在第一个计时器期间取消聚合可观察量时,我没有得到第二个可观察量的最终调用 - http 请求。例子:
const cancel = Observable.timer(500).finally(()=>ev.emit());
cancellableAgg.subscribe();
cancel.subscribe();
当上面运行时,我得到以下输出:
t1 done
我需要得到http done
以及,以便清除加载指示器。我怎样才能做到这一点?
Thanks!
EDIT
我没有意识到concat
操作员仅在其前任完成后订阅可观察量。我需要的是仅当 http observable 实际被订阅时才激活我的加载指示器。
我修改了我的包装函数如下:
getMyHttpObservable(...) {
const myHttpObservable = createRequestObservable(...);
const subscriptionAware = new Observable(subscriber => {
setLoadingIndicator(true);
myHttpObservable.subscribe(
nextEv => subscriber.next(nextEv),
errEv => subscriber.error(errEv),
() => subscriber.complete())
.add(()=>setLoadingIndicator(false));
};
return subscriptionAware;
}
所以基本上,我正在创建一个Observable
它透明地包裹着另一个Observable
,而且在实际订阅时还会执行一些附加操作 - 激活加载指示器。
但是,现在我失去了取消飞行中 XHR 请求的能力,因为Observable
不允许我传递取消处理程序,因此内部订阅永远不会被取消。
关于如何实现这一目标有什么想法吗?