Angular2 Http双重订阅

Question

Is it possible to call Subscribe method two times?

I'm trying to build api factory, which saves data in the factory, but that data can be use by different component on each ajax call.

factory

export class api {

    result = [];

    constructor (protected http: Http) { }

    getData ()
    {
        return this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);
    }
}

test component, which is calling subscribe method again

export class TestPage {

    showListResult; 

    constructor (protected api: api) {

        this.api.getData().subscribe(res => this.showListResult = res)
    }

}

Answer 1

You can return new Observable wrapper. Something like this should work:

import {Observable} from 'rxjs/Observable'

export class api {

    result = [];

    constructor (protected http: Http) { }

    getData () {
        return new Observable(observer => {
            this.http.get('./friends.json')
                .map((res: Response) => res.json())
                .subscribe(res => {
                    this.result = res;
                    observer.next(res);
                    observer.complete();
                });
        });
    }
}

Answer 2

If you want to make the HTTP request once, and share the result to multiple subscribers, then I suggest using a connectable observer that publishes and replays the last value emitted:

this.observable = http.get('...').map(t=> t.json()).publishReplay().refCount();

Each new subscriber will replay the last emitted value without making a new HTTP request.

Demo Plnkr

This answer is similar to this SO question and answer .

Answer 3

For later versions you can use the .share() from RxJs, ( https://rxjs.dev/api/operators/share ).

.publishReplay().refCount() as described by pixelbits is deprecated and replaced by .share() to be able to not call the method again but actually subscribe to the return data.