異步AJAX響應問題

Question

我正面臨來自HTTP請求響應的問題Angular 2。 我正在使用「.subscriber」來獲取HTTP請求的響應。

以下是我寫的代碼：

NewJobDetailsComponent.ts：

ngOnInit() { 
    this.masterData = this.masterDataS.getMasterData(["designations"]); 
//code breaking at below line 
    this.designations = this.masterData["designations"]; 
} 

MasterDataS.ts：

private masterData = {}; 
private baseUrl = "some URL"; 
getMasterData(keys) { 
    let missingData = []; 
    for (let key of keys) { 
    this.baseAjaxService.doPost(this.baseUrl, missingData) 
     .subscribe(data => { 
       this.masterData[key] = data[key]; 
       this.sessionStorage.setValue(key, data[key]); 
     }); 
    } 
    return this.masterData; 
} 

在上面的代碼，我去拿點來自服務器的數據，之後我必須使用結果分配給this.designations。

現在爲了使服務通用，我必須在MasterDataS.ts中爲這個請求使用.subscriber。因此，我無法在NewJobDetailsComponent.ts中編寫.subscriber

但是，由於NewJobDetailsComponent.ts中的代碼取決於HTTP請求的結果。我怎樣才能以同步方式編寫代碼，以便在得到HTTP的結果之後，只有下面的語句纔會被執行？

this.designations = this.masterData["designations"]; 

這種問題我在大多數情況下只能在這個例子中改變。

Answer 1

您必須重構代碼才能實現穩定的異步代碼處理。

// javascript Async mixed with Sync code? 

getMasterData(keys) { 
    console.log(1); 

    let missingData = []; 
    for (let key of keys) { 
    console.log(2); 

    this 
    .baseAjaxService 
    .doPost(this.baseUrl, missingData) 
    .subscribe(data => { 
     console.log(3); 

     this.masterData[key] = data[key]; 
     this.sessionStorage.setValue(key, data[key]); 
    }); 
    } 

    console.log(4); 
    return this.masterData; 
} 

// but instead you get 
// 1 
// 2 x keys lenght 
// 4 
// 3 x resolved times 

正如有人問， 這是解決你的問題，但是，請記住，理解異步代碼執行的JavaScript中的主要概念之一，所以，我建議你不要複製我的代碼，但做自己：

getMasterData(keys) { 

    return Promise 
    .all(
     keys 
     .map(() => (
      this 
      .baseAjaxService 
      .doPost(this.baseUrl, missingData) 
      .toPromise() 
      .then(data => data[key]) 
     )) 
    ) 
    ; 
} 


// Component 

ngOnInit() { 
    this.masterData = this 
    .masterDataS 
    .getMasterData(["designations"]) 
    .then(results => { 
     this.designations = results["designations"] 
     // do whatever you want with this.designations 
    }) 
    ; 
}