How to wait for Http answer in TypeScript - Angular 5

Question

i want to make a function that returns a token from a server but http.post() gets a response after my function returned the token.

How do i wait for http.post() before returning the token.

My code:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()

export class ServerConnectionService{
    constructor( private http : Http) { }
    token : string;
    Login(Password : string, Username : string, ServerRootURL : string) : string
    {
        let url = ServerRootURL + "api/AdminApp/RegisterToken";
        this.http.post(url, { "Username": Username, "Password": Password }).toPromise()
            .then(res => this.token =  res.json())
            .catch(msg => console.log('Error: ' + msg.status + ' ' + msg.statusText))
        return this.token;
    }
}

Thank you in advance.

Suren Srapyan · Accepted Answer · 2018-03-22 18:25:06Z

4

Actually you can't wait to a asynchronous code and return something from it.As you use promise, you need to use thenable functions and write the rest logic which is related to the result of it in that thenable functions. In your case it will be

Login(Password : string, Username : string, ServerRootURL : string): Promise<string>  {
      let url = ServerRootURL + "api/AdminApp/RegisterToken";
      return this.http.post(url, { "Username": Username, "Password": Password }).toPromise()
                      .then(res => this.token =  res.json())
                      .catch(msg => console.log('Error: ' + msg.status + ' ' + msg.statusText))
 }

and you need to use it like

Login('password', 'username', 'http://localhost:8081').then(token => your logic here)

answered Mar 22, 2018 at 18:25

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex P. · Accepted Answer · 2019-04-22 14:02:26Z

4

You can define your Login() function as async. Then you may await your http.post() call:

public async Login(pass: string, user: string): string {
    ...
    let response: Response = await this.http.post(url, data).toPromise();
    return response.json();
}

Note that calling Login() will also need to be awaited.

let token = await Login("foo", "bar");

edited Apr 22, 2019 at 14:02

Alex P.

1,15813 silver badges27 bronze badges

answered Mar 22, 2018 at 18:50

djs

1,7102 gold badges17 silver badges35 bronze badges

2 Comments

Suren Srapyan Over a year ago

Mention also that await must be also in the async function

Alfredo Morales Jan 21 at 22:46

.toPromise() is deprecated

Collectives™ on Stack Overflow

How to wait for Http answer in TypeScript - Angular 5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related