Angular RxJS sequential requests issue

Question

I have the following requests;

  public userLogin(username: string, password: string) {
    return this.http.post<any>(`${this.apiURL}/login `, {username, password}, constants.httpOptions)
      .pipe(
        map((response) => {
          this.setToken(response.token);
        })
      );
  }

  public getUser() {
    return this.http.get<IUser>(`${this.apiURL}/api/account`)
      .pipe(
        map((user: IUser) => {
          sessionStorage.setItem('user', JSON.stringify(user));
          this.userSubject.next(user);
        })
      );
  }

I would like to call them sequentially and check the returned value of the last request. I implemented the following block of code however, the console.log output is undefined within the subscribe section. In the network tab, I can see that both requests are called sequentially and there's no error.

this.authService.userLogin(username, password).pipe(
        concatMap(() => { return this.authService.getUser() })
      ).subscribe((res: any) => {
        console.log(res);
        this.router.navigate(['/home']);
      }, (err: HttpErrorResponse) => {
        if (err.status === 401) {
          console.log('sign-in page - 401');
          this.unauthorized = true;
        }
      });

What am I doing wrong?

Daniel Gimenez · Accepted Answer · 2022-01-05 15:05:28Z

1

This is an example of a good reason to specify return types in TypeScript. If you had you'd realize that the result of the map operator in getUser is always undefined. In this case I think you want to use tap which allows you to perform a side-effect while passing the source emission further through the stream.

public getUser(): Observable<IUser> {
  return this.http.get<IUser>(`${this.apiURL}/api/account`).pipe(
    tap((user: IUser) => {
      sessionStorage.setItem('user', JSON.stringify(user));
      this.userSubject.next(user);
    })
  );
}

You probably want to use tap in setToken as well if you intend on returning the token value from that method.

edited Jan 5, 2022 at 15:05

answered Jan 5, 2022 at 15:00

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

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

Comments

Will Alexander · Accepted Answer · 2022-01-05 14:59:59Z

0

The map operator on your getUser Observable doesn't return anything. Have it return what the Observable is supposed to emit, and you'll get something in the response.

Also, putting logic in a subscribe callback is not best practice. Use tap to implement side effects.

answered Jan 5, 2022 at 14:59

Will Alexander

3,5811 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular RxJS sequential requests issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related