在前两天的时候本打算对一个angualr的项目的前台进行统一的异常处理,虽然最后放弃了这个打算,但通过这个还是学到了不少东西,感觉还是值得写篇文章加强一下记忆的。
Errorhandler
通过这次我发现自己以前对异常的理解也是有问题的,以前一直以为各种错误都算是异常,http的错误也是异常,然后一谷歌angualr全局异常处理,好多文章都是介绍Errorhanler的,官方文档介绍如下:
提供用于集中异常处理的挂钩。
看意思,很符合自己需求(在http错误也算异常的情况下),而且使用方法也很简单。
先定义一个异常处理类,并在其中写下应该如何处理异常:
class MyErrorHandler implements ErrorHandler {
handleError(error) {
// do something with the exception
}
}
接着配置一下 Provider:
@NgModule({
providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}
angular的简单全局异常处理就完成了,如果想要更完善的异常处理,比如把异常信息发送到服务器可以看这篇文章
在配置完成后,发现自己的http错误完全没有触发这个方法,但是在某种情况下又可以触发,说明自己的配置并没错,只能理解为http错误不算异常了。
用专门的servic处理
那对于http异常又该如何呢? angular官方文档中是先把信息交给一个服务,然后再在服务中处理这个异常
错误处理
showConfig() {
this.configService.getConfig()
.subscribe(
(data: Config) => this.config = { ...data }, // success path
error => this.error = error // error path
);
}
获取错误详情
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
};
retry()
有时候,错误只是临时性的,只要重试就可能会自动消失。 比如,在移动端场景中可能会遇到网络中断的情况,这种情况我们可以让他自动重试几次,angualr为我们提供了这种方法
getConfig() {
return this.http.get(this.configUrl)
.pipe(
retry(3), // retry a failed request up to 3 times
catchError(this.handleError) // then handle the error
);
}
如果想要这样,所有已写方法都得改写,并且感觉并没有优雅多少。感觉没有必要。
拦截器
再之后就是用拦截器来处理,这个方法倒是简单,也不需要对已写方法进行什么改动,
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse,
HttpErrorResponse,
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
@Injectable()
export class RequestInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next.handle(request).pipe(tap((event: HttpEvent) => {}, (err: any) => {
if (err instanceof HttpErrorResponse) {
// do error handling here
}
}));
}
}