Home / Questions / 269120
Accepted
josanangel
Asked: 2020-06-04 04:19:13 +0800 CST 2020-06-04 04:19:13 +0800 CST

In this http request, where would the async and the await go?

  • 772

I wanted to force this function to be asynchronous, that's why I've given it to him, asyncbut awaithe, who was trying to put it in the return , won't let me.

Where should I put the await?

public async  loginU(usuario:string, password:string){
    return   this._http
    .get<Usuario>(this.URI+"/existU/"+usuario+"/"+password)
    .pipe(
      map(usuario=>{
        return    usuario;
      })
    )
  }
ajax

2 Answers

  1. Best Answer

    It doesn't really go anywhere. asyncand awaitthey are for working with promises and the methods of HttpClientwhat they return are Observables .

    The purpose of the async/await functions is to simplify the behavior of synchronous use of Promises and to perform some specific behavior on a group of Promises. Just as Promises are similar to structured callbacks, async/await is similar to a combination of generators and promises.

    Observables are much more powerful than promises since they allow, among other things, to cancel the execution of the http request, so I recommend you keep them instead of changing to promises.

    In your code it would be:

    public loginU(usuario:string, password:string){
    return this._http
        .get<Usuario>(this.URI+"/existU/"+usuario+"/"+password)
        .pipe(
            map(usuario=>{
                return    usuario;
            })
        )
}

    And elsewhere in your code:

    this.loginU(usuario, password).subscribe();

    The part subscribe()is what triggers the http call.

    It could also be:

    public loginU(usuario:string, password:string){
    return this._http
        .get<Usuario>(this.URI+"/existU/"+usuario+"/"+password)
        .pipe(
            map(usuario=>{
                return    usuario;
            })
        ).subscribe();
}

    If you want to call it directly from that method.

    By the way, write:

    map(usuario=>{
    return    usuario;
})

    It won't do anything since it map's a transform operation and you're returning the value of the parameter exactly as you received it.

    I imagine that what you were actually trying to do was assign the value to a variable of your component and for that you should not use it mapbut tapit is the one that allows you to execute secondary effects in the chain of operators of the observable. Something like this:

    usuario: any;

public loginU(usuario:string, password:string){
    return this._http
        .get<Usuario>(this.URI+"/existU/"+usuario+"/"+password)
        .pipe(
            tap(usuario=> {
                this.usuario = usuario;
            })
        ).subscribe();
}

    After the request is executed, the variable usuariothat is available in the template publicwill have the value you need.

    • 9

  2. Is that code Angular?

    From what I see, I understand that _http is an object of type HttpClient.

    If so then the loginU function is already asynchronous and wherever you are calling it you have to do it with a subscribe, you don't need to use async/await in this case.

    Async/await is used with promises, but in this case you're doing a subscription.

    public loginU(usuario: string, password: string) {
  return this._http
    .get<Usuario>(this.URI + "/existU/" + usuario + "/" + password)
    .pipe(
      map(usuario => {
        return usuario;
      })
    )
}

loginU.subscribe(result => {
  this.usuario = result
})
    • 0