Ionic - wait for http get return

Question

Edit: solution in the third answer.

I’m trying to do a login function for a project on Ionic 2. This function checks if the user is registered in the database through the php server and returns the user id if he has a registration. My problem is that I eat the method http.get() works asynchronously, I cannot check if the function return has been empty, since the return result is Undefined. I tried it in two ways, using observable and Promise:

With Observable: function calling the service:

    login() 
  {
    this.usuario = this.loginservice.get_usuario(this.loginusuario).subscribe(response =>this.usuario = response);
    console.log(this.usuario);
  }

Service coding:

public get_usuario(usuario):Observable<any>
  {
      return this.http.get(this.urlusuario +"/"+ usuario.usuario +"/"+ 
   usuario.senha); 
  }

Thus, the first time I click on the button that triggers the login() function, I receive the Undefined value as a response. The second time I click, it returns the value of the previous request.

Using Promise: Function calling the service:

login() 
  {
    this.usuario = this.loginservice.get_usuario(this.loginusuario);
    console.log(this.usuario);
  }

service coding:

public get_usuario(usuario):Promise<any>
  {
    var resultado;
      return this.http.get(this.urlusuario +"/"+ usuario.usuario +"/"+ usuario.senha).toPromise().then(function(data){
         return  data; 
      });
  }

Using Promise I can return the id on the first execution of the login function, but I couldn’t find any way to access __zone_symbol__value which is where the object is stored according to the console.log().

I was wondering if there’s a way to wait for the response from http.get() for the program to continue the execution (in case of using observable) or how do I access the object that is returned from the previous

.

Answer 1

I want to thank you for your help, Lucas, and tell you how I arrived at the final solution to my problem. I used the code you gave in response to get the value of a file. To wait for the return of the request, I added async the name of the login function () and await on the service call. The code was as follows:

login()

async login() {
   await this.loginservice.get_usuario(this.loginusuario).
  then(response => this.usuario = response);
   console.log(this.usuario);
}

get_usuario()

public get_usuario(usuario):Promise<any>
  {
      return this.http.get(this.urlusuario +"/"+ usuario.usuario +"/"+ usuario.senha).toPromise().then(function(data){
         return  data; 
      });
  }

Answer 2

To access the result of a Promise you can make the request in the service as follows:

public get_usuario(usuario):Promise<any> {
var resultado;
  return new Promise(resolve => { 
  this.http.get(this.urlusuario +"/"+ usuario.usuario +"/"+ usuario.senha)
  .subscribe( res => resolve(res));
 });

}

In the login method capture the data with:

 login() {
       this.loginservice.get_usuario(this.loginusuario).
       then(response => this.usuario = response);
        console.log(this.usuario);
  }

I have an example working with Precedents on github. https://github.com/brognilucas/top-weather/blob/master/src/providers/city-service/city-service.ts