Question

Observables是一个流，它将在完成后执行并完成。很公平。在使用服务进行多次API调用的一个组件中，可以做任何事情来确保一个observable在另一个启动之前完成吗？

因此，在下面的示例中，可以采取哪些措施来确保在getReport启动之前getOptions完成。 getReport依赖于getOptions获取的数据。

  ngOnChanges() {
    if (this.treeResult != null) {              
      for (var index = 0; index < this.treeResult.length; index++) {        
        var element = this.treeResult[index];               
          this.thumbnailView = null;

          this.getOptions(element.id);            

          this.getReport(element.id, this.a, this.b, element.c);              
      }
    }
  }

  getOptions(id: number) {
    this._Service.GetOptions(id)
      .subscribe(options => { this.select = options[0].Options1, this.num = options[0].Options1[0].optionId,
                              error => this.errorMessage = <any>error)
  }  

  getReport(id: number, a: number, b: number, c: string) {
    this._Service.GetReport(id, a, b, c)
      .subscribe(data => { this.data = data }, error => this.errorMessage = <any>error);
  }

如果需要，很高兴提供更多信息

Answer 1

是。在第一个observable的done（）方法中调用第二个observable：

 ngOnChanges() {
    if (this.treeResult != null) {              
      for (var index = 0; index < this.treeResult.length; index++) {        
        var element = this.treeResult[index];               
          this.thumbnailView = null;

          this.getOptions(element.id, element.c);                       
      }
    }
  }

  getOptions(id: number, c : any) {
    this._Service.GetOptions(id)
      .subscribe(options => { 
              this.select = options[0].Options1;
              this.num = options[0].Options1[0].optionId;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
              this.getReport(id, this.a, this.b, c);
          });
  }  

  getReport(id: number, a: number, b: number, c: string) {
    this._Service.GetReport(id, a, b, c)
      .subscribe(data => { 
               this.data = data;
          }, error => {
              this.errorMessage = <any>error;
          }, () => {
              // done
          });
  }

Answer 2

您可以利用flatMap运算符来串行执行observable。

以下是在您的案例中使用它的方法：

  ngOnChanges() {
    if (this.treeResult != null) {              
      this.treeResult.forEach(element => {
        this.thumbnailView = null;

        this.getOptions(element.id).flatMap(() => { // <------
          this.getReport(element.id, this.a, this.b, element.c);
        }).subscribe();
      });
    }
  }

  getOptions(id: number) {
    return this._Service.GetOptions(id)
      .map(options => { // <-----
        this.select = options[0].Options1;
        this.num = options[0].Options1[0].optionId
      })
      .catch(error => this.errorMessage = <any>error);
  }  

  getReport(id: number, a: number, b: number, c: string) {
    return this._Service.GetReport(id, a, b, c)
      .map(data => {
        this.data = data;
      })
      .catch(error => this.errorMessage = <any>error);
  }

Angular2 Observables和执行顺序

2 个答案: