异步HTTP请求的顺序

时间:2016-06-27 21:37:03

标签: typescript angular angular2-routing angular2-http

基本上我有一个包含元素列表的组件,我有一个详细信息组件,您可以在其中编辑或添加新元素。

我通过http服务添加元素(this.myservice基于文档https://angular.io/docs/ts/latest/tutorial/toh-pt6.html中的hero.service.ts)到我的服务器。然后我直接跳回到元素组件列表。

我使用Zone,以便调用ngOnInit。 Angular 2 ngOnInit not called

问题在于,元素列表通常不会使用新元素进行更新。我想异步HTTP请求的顺序混淆了。

一个好的解决方案怎么样?

export class DetailElemComp {
    this.myService.addElem(this.elem)
      .subscribe(
        error => this.errorMessage = <any>error);
    this.zone.run(() => this.router.navigate(['ListComponent']));
}
export class ListOfElemComp {
    ngOnInit() {
        this.myService.getElems()
          .subscribe(
            elems => this.elems = elems,
            error => this.errorMessage = <any>error);
    }
}

1 个答案:

答案 0 :(得分:4)

嗯,就像你说的那样,它是一个异步请求。因此,如果您想在请求完成后执行某些操作,我建议将该逻辑移动到subscribe函数的onCompleted回调lambda中,如下所示:

export class DetailElemComp {
    this.myService.addElem(this.elem)
      .subscribe(
        data => null,
        error => this.errorMessage = <any>error,
        () => this.zone.run(() => this.router.navigate(['ListComponent']))
      );
}

subscribe调用将在subscribe方法内部的回调之前运行{<1}}以下的代码。