How to wait for a http request to finish in Angular?

Question

I\'ve been building a SPA with Angular 4 on the front end and ASP.NET Core 2 on the Backend. Basically, I\'m trying to automatically renew an user login, given a valid token. Wh

Answer 1

You can use promises with async/await

async getUser() {
    if (this.storage.token == null || this.storage.token == '') {
        return;
    }

    const t = await this.net.get<LoginModel>(`Authentication/GetUser`).toPromise();

    this.storage.token = t.token;
    this.storage.user = t.user;

    console.log(this.storage.user);
}

See more:

• Promises
• async
• await
• ES8 async/await
• async/await tutorial
• async/await explained

Answer 2

You can not use the async/await syntax with Observables returned by Angular HttpClient so you first need to convert the observable to a promise first.

Luckily the Observable interface exports a toPromise() method which returns a promise from the observable:

await this.net.get<LoginModel>('Authentication/GetUser').toPromise();

See this example of how to use Async/Await with Angular HttpClient

Answer 3

Use .toPromise on your observable followed by async/await.

await this.net.get<LoginModel>(`Authentication/GetUser`).toPromise();