ajax – 多次订阅rxjs Observer而不执行多个请求

所以我正在尝试为我的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;
    }

}

正如您所看到的,我尝试使用here所述的.share()方法,但它不能按我预期的方式工作.

我想“挂钩”创建和完成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;
}

您需要在订阅和返回之前共享(),以便内部和外部都获得可观察的多播版本.

但是请注意,共享将可观察的内容转换为热的可观察对象,因此您可能希望这样做：

createConnection(request: Request) {
    return Observable.defer(() => {
        this.slimloadingBarService.start();

        return super.createConnection(request).response
            .do(() => this.slimloadingBarService.complete());
    });
}

Observable.defer意味着它内部的所有代码都不会被执行,直到您实际订阅它为止. do运算符在不影响流的情况下接入事件流.