異步/等待未在Angular 8中按預期工作

Question

我習慣在Asp.net中使用async / await。 現在，我需要在ngBootstrap Modal Service中進行幾個API調用（4）。 用戶將單擊按鈕以打開模態。 第一個API調用獲取Modal需要的基本信息。 異步OpenModal（）方法裝飾有異步，並且第一個API調用使用異步res，如下所示。

this.service.findContent(id).subscribe(
          async res => { 

  //other code 

  var socialDataResult = await this.getSocialData();
  console.log('socialDataResult ', socialDataResult);

  //other code

},


async getSocialData() {

        let result: SocialData;

        this.socialDataService.findSocialData().subscribe(
          async res => {

            let socialData = new SocialData(res);
            console.log('socialData ', socialData);

            result = socialData;
            return result;

          },
          err => {

            console.log(err);
          }
        )

        return result;

      }

我希望代碼在將其寫入控制台之前會等待響應從getSocialData返回。 照原樣，它將控制台日志寫在調用方法的下面，然后再將控制台日志寫在被調用的方法中。 調用方法中的控制台日志顯示“ undefined”。 調用方法中的控制台日志顯示了包含所有數據的SocialData對象。

同樣重要的是要注意，當我將鼠標懸停在this.getSocialData（）;上時，我得到了。

(method) ContentComponent.getSocialData(): Promise<SocialData>

任何幫助深表感謝。 謝謝！

Answer 1

getSocialData表示它是async ，但實際上從未等待任何內容。 如果您沒有利用Observables的任何高級功能，則最好將findSocialData()的結果轉換為Promise。

async getSocialData() {

    try {
        let res = await this.socialDataService.findSocialData().toPromise();
        let socialData = new SocialData(res);
        console.log('socialData ', socialData);
        return socialData;
    } catch(err) {
        console.log(err); // you might not actually want to eat this exception.
    }
}

Answer 2

我認為您正在使用Observables和async / await進行混合。 對於您的用例，我建議您只使用可觀察對象。 看來您有多個被鏈接的呼叫，可觀察性可幫助您組織呼叫並以所需方式獲得響應。

您可以簽出我的stackblitz，那里有解決嵌套訂閱的解決方案。

https://stackblitz.com/edit/rxjs-learnings?file=nested-subscribe.ts

使用Observables進行處理將是一個很好的解決方案。