一个接一个地调用Angular2函数

我在Angular2项目中有一个服务，它接受一些参数并返回一个值列表来填充窗体上的下拉菜单。当表单组件初始化时，我需要用不同的参数多次调用相同的服务来定义多个不同的下拉菜单，但是如果我将它们全部调用，最后一个调用clobbers先前的调用，可能是因为后续调用覆盖或取消以前的提取。一个接一个地调用Angular2函数

我已经把每个调用分成了它们自己的函数，但是我需要一种方法来调用每个函数的串行方式，这样第二个函数才会在第一个函数完成之后才被调用。每个函数都可以独立工作，但是如果我调用多个函数，只有最后一个调用成功，并且第一个失败并返回错误（因为服务本身在完成前使用新参数调用时会终止当前提取）。

this.fetchValueListOne(); 
this.fetchValueListTwo(); 
this.fetchValueListThree();

我试图与承诺这项工作，但与具有传递我想进入到功能服务很快作用域地狱，然后卷起不能够得到所产生的数据备份出来再次 - 每个服务调用需要三个参数，然后设置组件中定义的特定的this.valueList []变量，并在窗体上使用。

我也尝试创建一个函数列表作为变量，然后遍历它们，但是我遇到了同承诺一样的范围问题。

该服务返回一个Observable，该函数订阅该Observable，检索数据并将其分配给组件中的下拉值列表绑定到的数组变量。

的功能是这样的：

fetchValueListOne() { 
     this.dataSvc.getValueList('Val-List-One', this.stateSvc.currentContext, this.stateSvc.currentLanguageCode) 
      .map(response => response.json()) 
      .subscribe(
      data => { 
       this.valListOne = data; 
      }, 
      err => console.log('Error', err), 
     () => { 
       console.log('this.valListOne', this.valListOne); 
      } 
     ); 
    }

来源

2017-04-10 Stephen R. Smith

这三个函数返回promise或observables？ –

服务返回Observable，这些函数订阅Observable，检索数据并将其分配给组件中的特定变量。 –

电话时，接收数据的功能。如：

this.fetchValueListOne().subscribe((firstData) => { 
      this.fetchValueListTwo(firstData); 
      // Do something with firstData 
     } 
    ); 

    this.fetchValueListTwo().subscribe((secondData) => { 
      this.fetchValueListThree(secondData); 
      // Do something with secondData 
     } 
    ); 

    this.fetchValueListThree().subscribe((thirdData) => { 
      // Do something with thirdData 
     } 
    );

，并宣布这些功能为Observable，如：

public fetchValueListOne(): Observable<any> { // Get firstData } 
public fetchValueListTwo(): Observable<any> { // Get secondData} 
public fetchValueListThree(): Observable<any> { // Get thirdData}

这样你就可以肯定，当你调用一个函数，你必须与前一个数据。

来源

2017-04-10 15:35:59 SrAxi

SrAxi指出我正确的方向，最终我解决了以下问题，Promise原来是最好的解决方案，特别是Promise/.then机制很好地解决了这个问题。

fetchValueList(listCode): Promise<any> { 
     return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode) 
      .map(response => response.json()) 
      .toPromise(); 
    } 

    initializeDropDowns() { 
     this.fetchValueList('First-Val-List') 
      .then(data => { 
       this.firstValList = data; 
       return this.fetchValueList('Second-Val-List') 
      }).then(data => { 
       this.secondValList = data; 
       return this.fetchValueList('Third-Val-List') 
      }).then(data => { 
       this.thirdValList = data; 
      }) }

我在组件中定义了函数，然后在ngOnInit中调用了initializeDropDowns（）。

fetchValueList函数返回一个Promise，所以第一次调用传递第一个listCode，当Promise解析时，返回值位于.then块中的数据变量中，我们可以将它分配给this.firstValList变量。由于函数已经返回了数据，我们知道服务已经完成，并且使用第二个listCode重新调用是安全的，返回值位于下一个.then块的数据变量中，并将其分配给this.secondValList变量。

我们可以根据需要链接此次数以填充所有变量，并且在最后一个代码块中，我们简单地省略return语句，并且块终止。

这是一个非常具体的用例，我们有一个单独的服务需要在组件初始化时被多次调用，并且服务必须在其可以被再次调用之前完成其获取并返回一个值，但是在这种情况下，Promise/.then方法是理想的。

来源

2017-04-12 05:27:58

我很高兴我很有用！祝你今天愉快！ ;） – SrAxi

一个接一个地调用Angular2函数

回答

相关问题