Angular 5 HttpClient returning before having the value

Question

I'm starting to work with Angular and I have a pretty simple question.

I'm using this starter project that I created via the ngx-rocket tool, and I'm trying to implement the authentication using my webapi. I'm talking about this service (see original code).

As Http module I'm using the new one (import { HttpClient } from '@angular/common/http';). and I changed the login method of the service above to this:

  login(context: LoginContext): Observable<Credentials> {

    return  this._http.post<Credentials>("/api/account/login", 
      {Email : context.username,Password:context.password});        
  }

The http request happens and returns successfully. My problem: as you can see I should also set the credentials using this.setCredentials(data, context.remember);. What is confusing to me is how to return the observable and set the credentials in the same method? I tried keeping the returned observable in a variable, subscribing to it, setting the data and then return but it returns before setting the data (I know it's async).

This is what is confusing to me, it's pretty basic for Angular but still confusing to me. How can I change this method to give the proper return and also set the credentials?

Thanks for any help

ArunDhaJ · Accepted Answer · 2017-12-14 11:52:05Z

4

Try using pipe

login(context: LoginContext): Observable<Credentials> {
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password})
                .pipe(
                    tap(data => {
                        this.setCredentials(data, context.remember);
                    })
                );
}

answered Dec 14, 2017 at 11:52

ArunDhaJ

6316 silver badges18 bronze badges

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

2 Comments

André Luiz Over a year ago

Thanks for your answer! TS is giving me: cannot find name 'tap'. What should I import to have it?

ArunDhaJ Over a year ago

import { tap } from 'rxjs/operators';

Igor · Accepted Answer · 2017-12-14 12:01:58Z

2

You can use the lettable tap (formerly do) operator and still return the observable.

import { tap } from 'rxjs/operators/tap';

login(context: LoginContext): Observable<Credentials> {
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password})
        .pipe(do((response) => {
          // this.setCredentials(data, context.remember);
        })
    );
}

The operation is commented out because I am not sure what you are getting back or wanting to pass.

If you wanted to return something different based on the actions of setCredentials then use map instead and return something from the method.

edited Dec 14, 2017 at 12:01

answered Dec 14, 2017 at 11:52

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Collectives™ on Stack Overflow

Angular 5 HttpClient returning before having the value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related