异步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 
    }) 
    ; 
}