异步 HTTP 请求的顺序

Posted

技术标签:

【中文标题】异步 HTTP 请求的顺序【英文标题】:Order of asynchronous HTTP requests 【发布时间】: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

问题是元素列表通常还没有被新元素更新。我想搞混了。

一个好的解决方案应该是什么样的?

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】:

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

【讨论】:

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

以上是关于异步 HTTP 请求的顺序的主要内容,如果未能解决你的问题,请参考以下文章

如何保证异步请求中的正确顺序

使顺序 HTTP 请求成为节点中的阻塞操作吗?

详解Ajax请求——多个异步请求的执行顺序

dva 如何把同步改为异步请求

解决for循环中异步请求顺序不一致的问题

多个异步ajax请求指定顺序执行