异步 HTTP 请求的顺序答案

【问题标题】：Order of asynchronous HTTP requests异步 HTTP 请求的顺序
【发布时间】：2016-10-30 00:57:44
【问题描述】：

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

通过 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);
    }
}

【问题讨论】：

标签： typescript angular angular2-routing angular2-http

【解决方案1】：

嗯，就像你说的，这是一个异步请求。因此，如果您想在请求完成后执行某些操作，我建议将该逻辑移动到 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 方法内部的回调执行之前运行。

【讨论】：

非常感谢。您的解决方案非常简洁。