Question

我已经构建了一个Angular 5应用程序，它在每次调用时都会处理错误。使用HttpClient，我能够拦截在向服务器发送请求后发生的错误。在将请求发送到API的服务方法上拦截错误，然后在发生错误时将其推送到组件以显示带有错误消息的良好模式。

我想使用拦截器来实现相同的行为，以便在一个集中的方式上处理所有错误。但我不确定是否可以与拦截器类中的组件进行通信，将消息发送给它，因此它可以触发当前正在执行的模式，或者如何直接从拦截器类触发模态。

这是我目前的逻辑：

组件：

  ....
 export class VerificationComponent implements OnInit {
  //Use to call the modal when errors happen
  @ViewChild('modalError') displayErrorRef: ModalComponent; 

//Method send a request to the api using a service instance _myService
getNextRecord() {

    this.errorMesage = "";
    this._myService.getCandidate()
        .subscribe(candidate => {
            this.loadCandidate = candidate;
            this.userName = this.appService.getUser();
        }, error => {                
            this.errorMesage = <any>error.errorMessage;                
            this.displayErrorRef.show();
        });
   }

}
....

服务：

.....
@Injectable()

export class MyService {

  getCandidate(): Observable<ICandidate> {
    return this._http.get(this._getCandidateUrl, this.jwt())
        .map((response: Response) => <ICandidate>response.json())            
        .catch(this.handleError);
   }


private handleError(error: Response) {        
    if (error.text())
        return Observable.throw({errorMessage:error.text(),erroStatus: error.status });
    else
        return Observable.throw('You are not authorised to get this resource');
    }
}
....

模板：

 <!-- This is a child component to display the error message on the top of 
 this template -->
  .....
<app-modal #modalError>
<div class="app-modal-header">
    Error
</div>
<div class="app-modal-body">
    {{errorMesage}}
</div>
<div class="app-modal-footer">
    <button type="button" class="btn btn-default" (click)="hideModalError()">Logout</button>
    <button type="button" class="btn btn-default"(click)="tryGetNextRecord()">Try Again</button>
</div>
</app-modal>
....

Answer 1

我建议创建ResponseInterceptor和ErrorHandlerService以拦截不良响应（500's等）并触发处理错误的集中服务。

到目前为止，我认为服务与组件通信的最佳方式是Observables。类似的东西：

// ErrorHandlerService
private errorEvent = new Subject();
public errorEvent$ = this.errorTrigger.asObservable();
public triggerError(error: any): void {
   // manipulate your error here and then:
   this.errroEvent.next(error);
}


//ResponseInterceptor
constructor(private errorHandlerService) {}
enter code here
intercept(...): ... {
   //must check if response is an error to then:
   this.errorHandlerService.triggerError(response);
}


// Your component
fetchData() {
   this.errorHandlerService.errorEvent$.subscribe((error) => {
      // here you have the error to manipulate in your component
   });
   this.anyOtherService.fetchObject().subscribe();
}

希望这对您正在寻找的内容有所帮助

Answer 2

对于使用HttpInterceptor的全局错误处理程序示例，您需要以下内容。

ErrorInterceptor
ErrorService
CustomErrorModal

流程是：

app.module =＆gt;注册拦截器。

app.module =＆gt; regsiter错误服务作为提供者。

app.component =＆gt;注册显示错误模式的全局错误处理。

YourCustomComponent =＆gt;不订阅Subject / Observable的错误

您的主app.component将subscribe来自错误服务的任何更新，并使用模式引用相应地显示它们。

<强> app.module

//other code
const interceptors = [{
    provide: HTTP_INTERCEPTORS,
    useClass: ErrorInterceptor,
    multi: true
}];

const services = [{
    ErrorService
}];

@NgModule({
    //other code
    providers: [
        interceptors,
        services
    ],
    //other code
})

<强> error.service

@Injectable()
export class ErrorService
{
    private errors = new Subject<string[]>();

    constructor() { }

    public addErrors = (errors: string[]): void =>
        this.errors.next(errors);

    public getErrors = () =>
        this.errors.asObservable();
}

<强> error.interceptor

@Injectable()
export class ErrorInterceptor implements HttpInterceptor
{
    constructor(private errorService: ErrorService)
    {         
    }

    intercept(
        request: HttpRequest<any>,
        next: HttpHandler): Observable<HttpEvent<any>>
    {
        return next.handle(request).do(() => { }, (response) =>
        {
            if (response instanceof HttpErrorResponse)
            {                
                if (response.status === 401)
                {
                    return;
                }                

                if (response.status === 400 &&
                    response.error)
                {
                    this.errorService.addErrors(Array.isArray(response.error) ? response.error : [response.error]);
                    return;
                }

                this.errorService.addErrors([`Your generic error message`]);
            }

            return Observable.throw(response);
        });
    }
}

<强> app.component

export class AppComponent implements OnDestroy
{
    private ngUnsubscribe = new Subject();

    @ViewChild('modalError')
    displayErrorRef: ModalComponent; 

    constructor(private errorService: ErrorService)
    {
        this.initializeErrors();
    }    

    ngOnDestroy()
    {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }

    private initializeErrors()
    {
        this
            .errorService
            .getErrors()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe((errors) =>
            {
                //this.displayErrorRef.error = errors
                this.displayErrorRef.show();
            });
    }   
}

ngUnsubscribe是在您的主app.component被销毁时自动处理订阅。

Angular：错误处理 - 拦截器和模态

2 个答案: