我创建了一个发出简单 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 请求?
最佳答案
if (this.accountObservable === null) {
this.accountObservable = this._http.get('./data/data.json')
.share()
.map(res => res.json())
.catch(this.handleError);
}
在 Plunker 中,AppComponent 和 Component2 都调用了 getAccount().subscribe()
两次。
使用 share()
,Chrome 开发者工具的“网络”选项卡会显示一个针对 data.json
的 HTTP 请求。注释掉 share()
后,有 4 个请求。
关于在 Angular2 服务中多次发出 Http 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35673582/