Angular, extract the value from a promise

Question

I have a function that returns a Promise and inside that Promise I get an object in the resolve. Here it is the function of my service that works good.

buscarUsuario(email: string){
return new Promise((resolve, reject) => {
  this.http.post(`${URL}/user/email`, {email})
           .subscribe(resp => {                     
           //console.log(resp['usuario']);
           
           resolve(resp['usuario']);
          }); 
})

}

And then I get the value from the promise in this var:

const getDatos = this.usuarioService.buscarUsuario(this.correoUsuario.value.toString());

And then I call the var to get the value from the resolve and I can't extract that value from there:

var usuario: Usuario;
getDatos.then(usu => {
 
      usuario = usu;
      //Here I can see the value
      console.log(usuario);
      
    });
//But here I can't see the value
//And it's where I really need to get the value
console.log(usuario);

So, how do I get that value outside the Promise?

1. You're using [the promise constructor antipattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) 2. Once a function returns a promise, you always have to treat it as asynchronous. There is no way to convert it back to synchronous. So, you need to `await` it or use the Promise API to use the value produced. See [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086) — VLAZ, Oct 24 '20 at 19:09
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — VLAZ, Oct 24 '20 at 19:09
I'm pretty new with the Promises and I don't now how to use the await, so how do I await it? — craquito, Oct 24 '20 at 19:13
`const getDatos = await this.usuarioService.buscarUsuario(this.correoUsuario.value.toString());` — VLAZ, Oct 24 '20 at 19:14

score 1 · Answer 1 · answered Oct 25 '20 at 06:04

Using Promises in Angular is NOT recommended. Angular recommends use of Observable to handle asynchronous operations

Lets Try and change your code to return Observables only

buscarUsuario = (email: string)  =>
  this.http.post<any>(`${URL}/user/email`, {email}).pipe(
    map(resp => resp.usuario as Usuario)
  )

Basically the above code returns an Observable<any>(Observable of type any). I have type casted using <any> to transform the result to an Obserable<any>. Next I have use piping to extract the usuario from response

Now we can actually assign this value to a variable...

const getDatos$ = this.usuarioService.buscarUsuario(this.correoUsuario.value.toString());

NOTE: This is an Observable and you will need to subscribe to it

Observable can be assigned like any other property

const usuario: Observable<Usuario> = getDatos$

score 0 · Answer 2 · edited Oct 24 '20 at 21:07

0

You cannot get the value outside that function, reason because since you use promise, you need to wait until the promise returns the value, so best possible way is you have do rest of your functionality within promise.then.

getDatos.then(usu => {
  //implement your other functionality
});`

edited Oct 24 '20 at 21:07

Jorge Mussato

2,266
2
11
19

answered Oct 24 '20 at 19:40

indsoft

83
7

Angular, extract the value from a promise

2 Answers2