Reputation: 1046
I am using Angular 5
along with RXJS 5.5
Before I could just do something like this
getProjectInfo(id): Observable<any> {
const URL = `${this.API}/${id}`;
return this.http.get(URL)
.pipe(map(res => res)),
catchError(this.handleServerError);
}
handleServerError(error: any) {
console.log(error.error || error.json() || error);
return Observable.throw(error.error || error.json() || error || 'Server error');
}
But now I get this error
Error:(21, 5) TS2322:Type 'UnaryFunction<Observable<{}>, Observable<any>>' is not assignable to type 'Observable<any>'.
Property '_isScalar' is missing in type 'UnaryFunction<Observable<{}>, Observable<any>>'.
I've also tried this
getProjectInfo(id): Observable<any> {
const URL = `${this.API}/${id}`;
return this.http.get(URL)
.pipe(map(res => res)),
catchError(err => this.handleError('getProjInfo', URL));
}
private handleError(method: String, URL: string): any {
return (err: any) => {
const errMsg = `error in ${method}() retrieving ${URL}`;
console.log(`${errMsg}:`, err);
if (err instanceof HttpErrorResponse) {
console.log(`status: ${err.status}, ${err.statusText}`);
}
return Observable.throw(errMsg);
};
}
What am I doing wrong?
Upvotes: 3
Views: 7876
Reputation: 201
I don't think the answer you accepted is correct.
Using pipe syntax, I believe it should be like so:
return this.http.get(URL)
.pipe(
map(res => doStuff(res)),
catchError(err => {
this.handleServerError(err);
return this.resDummyData;
})
);
When using the catchError operator, you'll need to return an observable again with data of the format that the subscription expects. Otherwise, catching the error won't help much if your logic in the downstream subscription fails because the actual http response data is missing...
Alternatively, instead of catchError you may want to use other rxjs operators like retry or retryWhen depending on your use case.
Good article: Simple Error Handling in RxJS
Upvotes: 3
Reputation: 1104
Keep in mind your brackets. You return pipe
result and catchEror
result divided by ,
:
return this.http.get(URL)
.pipe(map(res => res)),
catchError(this.handleServerError);
Place one bracket to own place:
return this.http.get(URL)
.pipe(
map(res => res),
catchError(this.handleServerError)
);
Upvotes: 13
Reputation: 1754
Your Piping is incorrect. Please change to :
getProjectInfo(id): Observable<any> {
const URL = `${this.API}/${id}`;
return this.http.get(URL)
.pipe(map(res => res)
.catch(err => this.handleError('getProjInfo', URL)));
}
As Martin said it should be inside pipe.
Upvotes: -2