[英]How to do ErrorHandling using catchError RxJS Operator in Angular?
I'm new to Angular/Typescript and using catchError RxJs.我是 Angular/Typescript 的新手并使用 catchError RxJs。 I'm also using.subscribe and pipe operators.
我也在使用 .subscribe 和 pipe 运营商。 I would like to use observable as much as possible, combining it with RxJS operators.
我想尽可能多地使用 observable,将其与 RxJS 运算符结合使用。 On submission of my form, frontend calls the API and a new product gets created and would like to have proper error handling for Error Codes of 400 and 500 using HttpErrorResponse.
在提交我的表单时,前端调用 API 并创建一个新产品,并希望使用 HttpErrorResponse 对错误代码 400 和 500 进行适当的错误处理。 I wrote below code but not sure if I'm doing the error handling correctly as I get the below error (see bottom).
我写了下面的代码,但不确定我是否正确地进行了错误处理,因为我得到了下面的错误(见底部)。
app.component.ts app.component.ts
onSubmit(): void {
if (this.form.valid) {
console.log('Creating product:', this.form.value);
this.http.post('/api/create', {
productName: this.form.value.productName,
}).pipe(catchError(err => {
if(err instanceof HttpErrorResponse && err.status == 500 || err.status == 502 || err.status == 503) {
this.err = "Server Side Error";
return throwError(err);;
}
else if(err instanceof HttpErrorResponse && err.status == 400){
this.err = "Bad Request";
return throwError(err);;
} else if(err instanceof HttpErrorResponse && err.status == 422){
this.err = "Unprocessable Entity - Invalid Parameters";
return throwError(err);;
}
})
.subscribe(
resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
);
}
this.formSubmitAttempt = true;
}
private onSubmitSuccess(resp) {
console.log('HTTP response', resp);
this.productID = resp.projectID;
this.submitSuccess = true;
this.submitFailed = false;
}
private onSubmitFailure(err) {
console.log('HTTP Error', err);
this.submitFailed = true;
this.submitSuccess = false;
}
Errors:错误:
app.component.ts - error TS2339: Property 'err' does not exist on type 'AppComponent'. app.component.ts - 错误 TS2339:“AppComponent”类型上不存在属性“err”。
app.component.ts:124:16 - error TS2339: Property 'subscribe' does not exist on type 'OperatorFunction'.}).subscribe( app.component.ts:124:16 - 错误 TS2339:“OperatorFunction”类型上不存在属性“订阅”。}).subscribe(
To solve your issue, I have modified the code and shown below.为了解决您的问题,我修改了代码,如下所示。
onSubmit(): void {
if (this.form.valid) {
console.log('Creating product:', this.form.value);
this.http.post('/api/create', {
productName: this.form.value.productName,
}).pipe(catchError(errorResponse=> {
const err = <HttpErrorResponse>errorResponse;
if (err && err.status === 422) {
this.err = "Unprocessable Entity - Invalid Parameters";
return throwError(err);
} else if (err && err.status === 400) {
this.err = "Bad Request";
return throwError(err);;
} else if (err && err.status === 404) {
this.err = "Not found";
return throwError(err);;
} else if (
err &&
(err.status < 200 || err.status <= 300 || err.status >= 500)
) {
this.err = "Server Side Error";
return throwError(err);;
}
})
.subscribe(
resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
);
}
this.formSubmitAttempt = true;
}
I would suggest creating a common exception service that handles any exception.我建议创建一个处理任何异常的通用异常服务。 You should separate the outgoing API calls to a separate service and then use that in your component.
您应该将传出的 API 调用分离到一个单独的服务,然后在您的组件中使用它。 It will be easy to read and maintain the code.
这将很容易阅读和维护代码。 Try the below code logic.
试试下面的代码逻辑。
import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable()
export class ExceptionService {
constructor(private toastService: ToastService) {}
catchBadResponse: (errorResponse: any) => Observable<any> = (
errorResponse: any
) => {
let res = <HttpErrorResponse>errorResponse;
let err = res;
let emsg = err
? err.error
? err.error
: JSON.stringify(err)
: res.statusText || 'unknown error';
console.log(`Error - Bad Response - ${emsg}`);
return of(false);
};
}
In your service, you can create a post method like this在您的服务中,您可以像这样创建一个 post 方法
saveEntity(entityToSave: EntityToSave) {
return <Observable<EntityToSave>>(
this.http.post(`${postURL}`, entityToSave).pipe(
map((res: any) => <EntityToSave>res),
catchError(this.exceptionService.catchBadResponse),
finalize(() => console.log('done'))
)
);
}
From your component, call the service which handles the exception从您的组件中,调用处理异常的服务
this.yourService.saveEntity(entityToSave).subscribe(s => {
//do your work... this get called when the post call was successfull
});
I hope it solve your issue.我希望它能解决你的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.