angular5 如何抛异常_angualr异常处理

在前两天的时候本打算对一个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

}

}));

}

}