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处理将是一个很好的解决方案。

异步/等待未在Angular 8中按预期工作

2 个答案: