CODEWITHSUNDEEP
angularapitypescript
Nicolas
Nicolas

Reputation: 4756

Angular 6 - Chained API calls not being fired

I'm trying to create an authentication system, it works in 2 parts.

First I need to do call with the username and password, if this is valid it returns a code.

This code is used to check if it's valid, and if it is, the user i authenticated.

This call should gets the code:

  requestAuthCode(request: models.AuthenticationRequest): Observable<any> {
    return this.httpClient
      .get<any>(environment.auth.authorize, {
        headers: headers,
        params: params
      })
      .pipe(
        tap(val => this.authenticate(val.code)),
        catchError(error => this.handleError(error))
      );
  }

This call checks if a code is valid and authenticates the user

  authenticate(code: string): Observable<any> {
    return this.httpClient
      .post<models.AuthenticationTokenResponse>(
        environment.auth.token,
        null,
        {
          headers: headers,
          params: params
        }
      )
      .pipe(
        tap(data => this.setSession(data)),
        catchError(error => this.handleError(error))
      );
  }

The Goal

If requestAuthCode gets a code in it's response, I want it to start the authenticate call, else it has to return an error.

However when I use

this.authService.requestAuthCode(request)
        .subscribe(
          data =>  {
            console.log(data);
          }

I just get the response data from my requestAuthCode and not from the chained authenticate call. I can also see that authenticate is not being triggerd.

How can I achieve that requestAuthCode triggers authenticate and returns that data to my component?

Upvotes: 0

Views: 41

Answers (1)

Antoniossss
Antoniossss

Reputation: 32535

Insteed of 

  tap(val => this.authenticate(val.code)),

try

 switchMap(val => this.authenticate(val.code)),

Upvotes: 1

Related Questions