ajax - 在不执行多个请求的情况下多次订阅 rxjs Observer

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;
    }

}

如您所见，我尝试使用 .share() 方法，如 here 所述，但它没有按我预期的方式工作。

我想“ Hook ”到 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()，以便内部和外部都获得可观察对象的多播版本。

但是请注意，share 会将 observble 转换为热 observable，因此您可能想改为这样做:

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

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

Observable.defer 意味着在您实际订阅它之前，不会执行其中的任何代码。 do 运算符在不影响流的情况下接入事件流。