在 rxjs catchError() 之后，Angular POST 请求未将结果传回

Question

I am trying to catch errors in a POST method using catchError. However when I get an invalid response (eg the login fails) the code executes the catchError() (the console.log is printed), but I never see the console message "login result received" from the subscription. Why isn't catchError passing a value back to the subscription? Note that everything works as expected when the login succeeds (the console.log is printed correctly)

this.auth.login(this.model.username, this.model.password).subscribe(x=>{ 
  console.log('login result received');
  this.loading=false });

my service:

login(username: string, password: string): Observable<boolean> {
    return this.http.post<TokenResponse>('/api/auth/token', { name: username, password: password }).pipe(
        catchError(this.appSvc.handleError<boolean>("auth/login", false)),
        map((response: TokenResponse) => {
            if (response !=null) {
                // do token things
                return true;
            }
            else
                alert('rxjs token null')
        }
        ));
}             

public handleError<T>(operation = 'operation', result?: T){
  console.log('got here');
  return of(result as T);}

Answer 1

You are using the catchError in the pipe incorrectly. Should be:

catchError(error => this.appSvc.handleError<boolean>("auth/login", false))

See also the Stackblitz with working code here: https://stackblitz.com/edit/angular-hugqem

Answer 2

It turns out that the result from catchError (a boolean) was being passed to map because the catchError was firing, then map was attempting to map the result. In my case

1. catchError was returning a boolean
2. map was looking for object of type TokenResponse and not finding it. So map returned nothing.

My fix was:

1. to change the type expected by map from 'TokenResponse' to 'any'
2. To catch the case where the response type was a boolean (the else if statement)

Full code:

login(username: string, password: string): Observable<boolean> {
    return this.http.post<TokenResponse>('/api/auth/token', { name: username, password: password }).pipe(
        catchError(this.appSvc.handleError<boolean>("auth/login", false)),
        map((response: any) => {
            if (response.token !=null) {
                // do token things
                return true;
            }
            else if (typeof response==="boolean") //note that catcherror will pass its return type (bool) to here
                    return false
            else
                alert('rxjs token null')
        }
        ));
}