Issue
I have an Angular 14
app and I'm using Angular's HttpClient
to make a request to my backend.
However, I have a requirement to transform the incoming data from a value returned from the server to an enum value that is defined in my frontend.
To do this, I've wrote this code:
public getState(): Observable<AuthState> {
return this.http.get<any>(apiPaths.auth.isAuthorized, { observe: 'response' })
.pipe(
map(resp => {
if (resp.ok) {
if (this.responseIsValid(resp.body)) {
return AuthState.Ok;
} else {
return AuthState.NotAuthorized;
}
} else {
return AuthState.NotAuthenticated;
}
})
);
}
As you can see, I'm getting a value from the backend and mapping it to a value of the AuthState
enum, which is defined as follows:
export enum AuthState {
NotAuthenticated = 'NotAuthenticated',
NotAuthorized = 'NotAuthorized',
Ok = 'Ok',
ConnectionError = 'ConnectionError'
}
This seems to work, but here comes the problem: I also need to catch errors, so I added the catchError
opertator into the observable pipe, like this:
public getState(): Observable<AuthState> {
return this.http.get<any>(apiPaths.auth.isAuthorized, { observe: 'response' })
.pipe(
map(resp => {
if (resp.ok) {
if (this.responseIsValid(resp.body)) {
return AuthState.Ok;
} else {
return AuthState.NotAuthorized;
}
} else {
return AuthState.NotAuthenticated;
}
}),
catchError(err => {
return AuthState.ConnectionError;
})
);
}
As soon as I do this, hoever, the code stops compiling. The compiler throws the following error:
Type 'Observable<string>' is not assignable to type 'Observable<AuthState>'.
Type 'string' is not assignable to type 'AuthState'
It's like adding the catchError
operator makes the entire pipe return Observable<string>
instead of Obsevable<AuthState>
.
Why is this happening? Note that this only happens when using an enum, if I change it to use any other type it works.
Solution
You need to return observable, so change the catchError block to:
import { of } from 'rxjs';
catchError(err => {
return of(AuthState.ConnectionError);
})
Answered By - Ali Adravi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.