1

在 Angular 4 中，使用带有拦截器的自定义错误处理程序，一切正常。以下是工作流程。

以下是我最了解如何处理错误的工作流程。

每当一个方法调用 HTTP 请求（使用 HttpClient）并且响应作为错误出现时

  1. 首先它到达拦截器（error.interceptor.ts）
    • 在这里我们检查错误状态。
    • 基于状态码，创建新对象appError，它是单个错误类的实例，例如。new AccessDenied(err.error))
  2. 在这个扩展类 的自定义类 ( access-denined.ts ) 中AppError
    • 我们调用super()使用父类方法。

然后使用throw Observable.error(appError)from error.interceptor.ts发送这个新创建的错误对象

  1. 现在，这个错误由catch​​组件中 HTTP 请求的订阅者块处理app.component.ts

    • 在这里，我们以 HTML 格式显示自定义错误消息，或者我们将错误发送到下一个使用throw error

  2. 现在这个错误将由全局错误处理程序（global-error-handler.ts）处理，它扩展了 Angular 的 ErrorHandler接口

    • 这里我们再次检查这个错误是实例AppError还是系统错误，然后在这里处理错误

app.module.ts

{ provide: ErrorHandler, useClass: GlobalErrorHandler }

app.component.ts

this.authService.myMethod(`url`).subscribe({
    (res) => { // successful response }
    , (err) => { 
        if(err instanceof AppError) {
            console.log('4. error display in html');
            this.errorMessage = err.message;
        } else {
            throw err;
        }
    }
});

错误拦截器.ts

import { Router } from '@angular/router';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor, HttpResponse, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { AuthFail, BadInput, NotFoundError, ServerError, AccessDenied } from '../errors/';
import { AuthService } from './../auth/auth.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    private auth: AuthService;
    constructor(private router: Router, private injector: Injector) { }
    logout = false;
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const auth = this.injector.get(AuthService);
        return next.handle(req).catch((err: HttpErrorResponse) => {
            let appError;
            console.log('1. error comes in interceptor: ', err);
            if (err instanceof HttpErrorResponse) {
                switch (err.status) {
                    case 401:
                        this.router.navigateByUrl('/login');
                        appError = new AuthFail(err.error);
                        break;
                    case 400:
                        appError = new BadInput(err.error);
                        break;
                    case 403:
                        appError = new AccessDenied(err.error);
                        break;
                    case 500:
                        appError = new ServerError(err.error);
                        break;
                    default:
                        appError = new Error(err.error);
                }
                return Observable.throw(appError);
            }
        });
    }
}

拒绝访问.ts

import { AppError } from './app-error';

export class AccessDenied extends AppError {
    constructor(error?: any) {
        console.log('2. from interceptor', error);
        const msg = error.message || " Access Denied";
        super(msg);
    }
}

应用程序错误.ts

import { Injectable } from '@angular/core';

export class AppError {
    constructor(public message: string, public title: string = 'Error') { 
        console.log('3. parent class of custom error handler'); 
    }
}

全局错误处理程序.ts

import { ErrorHandler, Injectable } from '@angular/core';
import { AppError } from './app-error';

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
    constructor() {
        super(true);
    }

    public handleError(error: any): void {
        if (error instanceof AppError) {
            console.log('5. App Error handled here in last', error);
            // throw error;
            );
        } else {
            console.error('An exception occured. Please try again.');
            super.handleError(error);
        }
    }
}

现在我的查询是，如果我在 if 块中写入throw error而global-error-handler.ts不是在控制台中显示以下错误

未捕获（来自文件名 Subscribe.js ）

那么我们如何处理这个错误呢？我的意思是，如果我们从全局错误处理程序中写入，我们将throw error如何以及在哪里处理它？

4

0 回答 0