angular2 2異步調用

Question

Angular2，打字稿

我有一個組件，一次從服務器顯示1個對象。

單擊按鈕后，表單會對對象執行某些操作，然后將數據發送到服務器。 立即在下一行中，得到下一個對象。

this.rawS.updateTags({......}); //Update object
this.candidateC.footerNavigateTo(.....);//Get next object

但是在競爭條件下，要獲取下一個對象的ajax在updateTags ajax到達服務器之前已到達服務器。

更新代碼的代碼為

  updateTags(rawCandidate) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(data => {
        console.log(data);
      });
  }

doPost的代碼是

doPost(url, inputParamJSON){
    let httpResponse  = this.http
      .post(url, inputParamJSON, this.options)
      .map(this.extractData)
      .catch(this.handleAjaxError);
    return httpResponse;
}

“ continue_screening”的路由具有一個路由解析器，該路由解析器會帶來下一個對象。

我如何確保footerNavigateTo（）僅在updateTags完成其整個周期之后運行？

Answer 1

如果您希望根據調用updateTags(rawCandidate)函數的位置而具有不同的行為，那么我提出以下解決方案：

  updateTags(rawCandidate, action) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(
       data => {
        action(data);

      },
      error => {
          console.log("error"); //handle error here
      });
  }

然后，您可以像下面這樣調用函數：

updateTags(rawCandidate, function(data){
   console.log(data);
   this.candidateC.footerNavigateTo(.....);//here you can use data
});

Answer 2

在這里要實現的是將兩個http調用鏈接起來，使它們以某種方式依賴。 在Angular 1.X中，可以使用promise來完成，但是使用AngularJS 2可以使用flatMap來實現。

請參閱“ 相關調用”部分中的此鏈接http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http 。

PS：如本文所述（ 在Angular 2中組合諾言 ），您也可以使用toPromise()將Observable（即，異步http調用）轉換為Promise，如果您對此更加熟悉的話。