Angular Observable被多次调用

Question

我有一个服务，其中定义了一个全局可观察对象，如下所示：

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

现在在我的几个组件中，我像这样在构造函数或ngOnInit中调用getLocation函数：

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

我的期望是对ipinfo.io的请求只会被发送一次。 但是，这没有发生。 从网络日志中，我可以看到多次向ipinfo发出请求。 看起来是一些计时问题。 如果在构造函数中添加调试器或console.log语句，则仅调用一次。 但是，发送了多个请求。

Answer 1

您可以使用rxjs 共享运算符。 这将确保后续的订户共享相同的可观察序列（直到观察者的数量返回0为止）

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

您也可以使用shareReplay运算符。 不同之处在于，将来将为所有订户存储可观察的结果。 例如，说您在应用程序加载时订阅了可观察对象，而在10分钟后订阅时使用了shareReplay ，则可观察对象将返回相同的结果，而不会发出另一个http请求。 而使用share ，观察者的数量在初始http请求完成后返回到0。 将来的订阅将触发另一个http请求