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

发布时间：2020-12-17 07:58:13 所属栏目：安全来源：网络整理

导读：我创建了一个发出简单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请求的服务：

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

我在我的bootstrap函数中添加了该服务以全局提供它(我希望为所有组件提供相同的实例)：

provide(AccountService,{ useClass: AccountService })

问题是当我在不同的组件中调用此服务时,每次都会发出GET请求.因此,如果我将其添加到3个组件,即使我检查是否已存在可观察量,也会发出3个GET请求.

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

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

使用 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个请求.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!