Question

所以我正在尝试为我的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（）方法，但它并不像我期望的那样工作。

我想＆＃34;挂钩＆＃34;创建和完成XHR请求以显示加载栏。但是，如果我离开.share（）调用，我会为每个.subscribe（）调用获取一个单独的HTTP请求。

但是，如果我使用.share（），我的第二个订阅将不会被执行：（

我做错了什么？感谢。

Answer 1

试试这个：

createConnection(request: Request) {
    this.slimLoadingBarService.start();

    let xhrConnection = super.createConnection(request).response.share();

    xhrConnection.subscribe(() => {
        this.slimLoadingBarService.complete();
    });

    return xhrConnection;
}

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

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

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

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

Observable.defer表示其中的所有代码都不会被执行，直到您实际订阅它为止。 do运算符在不影响流的情况下接入事件流。

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

1 个答案: