非同期AJAX応答の問題

Question

HTTPリクエストの応答に問題があります。角2です。 私は "。サブスクライバ"を使用して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にサブスクライバを書くことができません。

しかし、NewJobDetailsComponent.tsのコードはHTTPリクエストの結果によって異なります。どのようにすれば、HTTPの結果を取得した後で、以下のステートメントだけが実行されるように、コードを同期的に書くことができますか？

このような種類の問題は、ほとんどの場合、例が変更されるだけです。

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