Async / Await does't hit code inside async {}

Question

I try to implement loading spinner with async/ await database loading but can't hit code inside my async methode. My data loading looks like this

getServerList(){
    this.http.get('XXXX')
    .map((data : Response) =>{
      return data.json() as MyObject[];
    }).toPromise().then(x => {
      this.serverList = x;
    })
  }

And my function inside my component is

    async () => {

      try {
        await this.serverListService.getServerList()
      }catch{}
    }

Firs, i have a warning tell me that my await keyword is not usefull because there is nothing to await. So i decided to add an async keyword to my data loading like this

async getServerList(){
    this.http.get('http://localhost:6875/api/ServerList_Base')
    .map((data : Response) =>{
      return data.json() as ServerListBase[];
    }).toPromise().then(x => {
      return x;
    })
    return this.serverList
  }

So now my await is usefull but my problem is that the code never hit inside my async brackets. I mean the code inside

async () => {}

is never executed and i don't know why. I tried to lod it from the constructor / from the nginit from the ngAfterViewInit but nothing works

And Also when i try to remove these async brackets like this

 async loadDataFromDB(){

    await this.serverListService.getServerList()
    this.dataSource  = new MatTableDataSource()
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.showSpinner = false;
}

It doesn't wait the getServerList() before going to the second line "this.dataSource"... I am used to using async/await in c#, maybe i miss something for angular. Thanks in advance

Take the first version of `getServerList()`, add `return` to the first line (`return this.http.get('XXXX') ...`). You can't await something that doesn't return a promise. — Guy Incognito, Aug 21 '20 at 07:15
why are you mixing promises and async/await, pick one and use it — Liam, Aug 21 '20 at 07:16
`getServerList` needs to return the promise: `async getServerList(){ return this.http.get('http://localhost:6875/api/ServerList_Base')...` — Liam, Aug 21 '20 at 07:17
`.toPromise().then(x => { return x; })` is doing literally nothing — Liam, Aug 21 '20 at 07:19
@liam ok thanks, i think i need to have a deaper look on how promise works.. — MatDev8, Aug 21 '20 at 07:27
Or [observables](https://angular.io/guide/observables). Generally angular is built around observables not promises. — Liam, Aug 21 '20 at 07:28

Liam · Accepted Answer · 2020-08-21T07:30:17.970

Your getServerList should look like this

getServerList(): Observabe<MyObject[]>{
    return this.http.get('XXXX')
    .pipe(
       map((data : Response) =>{
          return data.json() as MyObject[];
       })
    );
  }

You then consume it thus:

getServerList().subscribe((data: MyObject[]) => {
   
});

I'd suggest you read the docs on observables on the angular web page and the afore mentioned How do I return the response from an asynchronous call? question.

Promises, async/await and observables are all similar solutions to the same problem but they all work differently. Your code currently has a mix of all 3 of these. There are multiple ways to achieve the above but I would recommend you pick one of these solutions and stick to it instead of mixing them up. Mixing them up simply makes your code confusing.

Async / Await does't hit code inside async {}

1 Answers1