在 Angular2 服务中多次发出 Http 请求

Question

我创建了一个发出简单 GET 请求的服务:

private accountObservable = null;

constructor(private _http: Http) {
}

getAccount () {
    // If we have account cached, use it instead
    if (this.accountObservable === null) {
        this.accountObservable = this._http.get('http://localhost/api/account')
            .map(res => <Account> res.json().data)
            .catch(this.handleError);
    }

    return this.accountObservable;
}

我已经在我的引导函数中添加了该服务以在全局范围内提供它(我希望为所有组件提供相同的实例):

provide(AccountService, { useClass: AccountService })

问题是当我在不同的组件中调用此服务时，每次都会发出 GET 请求。因此，如果我将它添加到 3 个组件，即使我检查一个 observable 是否已经存在，也会发出 3 个 GET 请求。

ngOnInit() {
  this._accountService.getAccount().subscribe(
    account => this.account = account,
    error =>  this.errorMessage = <any>error
  );
}

如何防止多次发出 GET 请求？

Answer 1

使用Observable.share() :

if (this.accountObservable === null) {
    this.accountObservable = this._http.get('./data/data.json')
      .share()
      .map(res => res.json())
      .catch(this.handleError);
}

Plunker

在 Plunker 中，AppComponent 和 Component2 都调用了 getAccount().subscribe() 两次。

使用 share()，Chrome 开发者工具的“网络”选项卡会显示一个针对 data.json 的 HTTP 请求。注释掉 share() 后，有 4 个请求。