Angular Observable被多次调用

Question

I have a service in which I defined a global observable like so:

 @Injectable()
  export class XYZService {
    country: Observable<any>;
    isBrowser: boolean;

    constructor(private http: Http,
                private httpClient: HttpClient,
                private router: Router,
                @Inject(PLATFORM_ID) private platformId: any) {
      this.isBrowser = isPlatformBrowser(platformId);
      if(this.isBrowser && !this.country) {
      this.country = this.http.get('https://ipinfo.io')
        .map(res => res.json())
        .catch(() => {
          return Observable.of({'country': 'SG'});
        }); 
      };
    }

    getLocation(): Observable<any> {
      return this.country;
    }

Now in several of my components I'm calling the getLocation function in the constructor or ngOnInit like so:

this.XYZService.getLocation()
  .subscribe(res => {
    this.country = res['country'];
});

My expectation is that the request to ipinfo.io would only be made once. However that is not happening. From the network logs I can see that the request to ipinfo is being made multiple times. Looks to be some timing issue. If I add a debugger or console.log statement within the constructor, it is only called once. However more than one request are sent.

Answer 1

You can use the rxjs share operator. This will ensure that subsequent subscribers will share the same observable sequence (until the number of observers returns to 0)

this.country = this.http.get('https://ipinfo.io')
    .map(res => res.json())
    .catch(() => {
      return Observable.of({'country': 'SG'});
    })
    .share();

You can also use the shareReplay operator. The difference is the observable result will be stored for any subscribers in the future. For example say you subscribe to the observable when the app loads, with shareReplay when you subscribe 10+ minutes later, the observable will return the same result and not make another http request. Whereas with share , the number of observers returns to 0 after the initial http request finishes. The future subscribe will trigger another http request