Async/await not working as expected in Angular 8

Question

I am used to using async/await in Asp.net. I now need to make several API calls (4) within the ngBootstrap Modal Service. The user will click on a button to open a Modal. The first API call gets the base information that the Modal needs. The async OpenModal() method is decorated with async and the first API call uses async res as shown below.

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;

      }

I would expect that the code would wait for the response to return from getSocialData before it writes to the console. As-is, it writes the console log just below the calling method before it writes the console log in the method being called. The console log in the calling method says "undefined". The console log in the method being called shows the SocialData object with all the data.

It's also important to note that when I hover over await this.getSocialData();, I get this.

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

Any help is much appreciated. Thanks!

Answer 1

getSocialData says it's async, but it never actually awaits anything. If you're not taking advantage of any of the advanced features of Observables, you're probably better off converting the result of findSocialData() to a 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

I think you are mixing using Observables and async/await. For your use case i would recommend you to just use observables. It looks like you have multiple calls which are chained and observables helps you to organise your calls and get the responses in a manner your want.

You can checkout my stackblitz where i have a solution for handling nested subscribes.

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

Handling with Observables would be a elegant solution here.