一個接一個地調用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函數

回答

相關問題