所以我正在尝试为我的 Angular 2 应用程序实现自定义 XHRBackend。这是我的课:
import {Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy} from "@angular/http";
import "rxjs/add/operator/catch";
import "rxjs/add/observable/throw";
import {SlimLoadingBarService} from "ng2-slim-loading-bar";
export class LoadingBarXHRBackend extends XHRBackend {
constructor(_browserXhr: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy, private slimLoadingBarService: SlimLoadingBarService) {
super(_browserXhr, _baseResponseOptions, _xsrfStrategy);
}
createConnection(request: Request) {
this.slimLoadingBarService.start();
let xhrConnection = super.createConnection(request);
xhrConnection.response.share().subscribe(() => {
this.slimLoadingBarService.complete();
});
return xhrConnection;
}
}
如您所见,我尝试使用 .share() 方法,如 here 所述,但它没有按我预期的方式工作。
我想“ Hook ”到 XHR 请求的创建和完成以显示加载栏。但是,如果我离开那个 .share() 调用,我会为我进行的每个 .subscribe() 调用收到一个单独的 HTTP 请求。
但是如果我使用 .share() 我的第二个订阅根本不会被执行 :(
我做错了什么?谢谢。
最佳答案
试试这个:
createConnection(request: Request) {
this.slimLoadingBarService.start();
let xhrConnection = super.createConnection(request).response.share();
xhrConnection.subscribe(() => {
this.slimLoadingBarService.complete();
});
return xhrConnection;
}
您需要在订阅和返回之前share()
,以便内部和外部都获得可观察对象的多播版本。
但是请注意,share 会将 observble 转换为热 observable,因此您可能想改为这样做:
createConnection(request: Request) {
return Observable.defer(() => {
this.slimLoadingBarService.start();
return super.createConnection(request).response
.do(() => this.slimLoadingBarService.complete());
});
}
Observable.defer
意味着在您实际订阅它之前,不会执行其中的任何代码。 do
运算符在不影响流的情况下接入事件流。
关于ajax - 在不执行多个请求的情况下多次订阅 rxjs Observer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40034084/