Question

我有一个拦截器，我尝试在其构造函数中输出一个记录器，以确保拦截器被实例化。

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';
import 'rxjs/add/operator/retry';

import { ErrorCustomHandler } from './error-custom-handler';

// Because the best Error is the one that never happens, improve the error handling
// using an HttpInterceptor to intercept all the server calls and retry them n times
// before throwing an error
const NB_RETRIES = 5;

@Injectable()
export class ErrorRequestInterceptor implements HttpInterceptor {

    constructor(
        private errorCustomHandler: ErrorCustomHandler
    ) {
        console.log('In the constructor of error request interceptor');
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).retry(NB_RETRIES).do((event: HttpEvent<any>) => { }, (error: any) => {
            if (error instanceof HttpErrorResponse) {
                this.errorCustomHandler.handleError(error);
            }
        });
    }
}

拦截器注册为：

import { NgModule, ErrorHandler } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { ErrorCustomHandler } from './error-custom-handler';
import { ErrorService } from './error.service';
import { ErrorRoutingModule } from './error-routing.module';
import { ErrorComponent } from './error-component/error.component';
import { ErrorRequestInterceptor } from './error-request-interceptor';

// See https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a

@NgModule({
    declarations: [
        ErrorComponent
    ],
    imports: [
        CommonModule,
        RouterModule,
        ErrorRoutingModule,
    ],
    providers: [
        ErrorService,
        {
            provide: ErrorHandler,
            useClass: ErrorCustomHandler
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorRequestInterceptor,
            multi: true,
        }
    ]
})
export class ErrorModule { }

我可以看到拦截器源文件正在执行。

但构造函数记录器永远不会显示在浏览器控制台中。

我正在使用Angular 6

完整的源代码可在github

上找到

编辑：我将提供程序移动到forRoot方法，并使用ErrorModule.forRoot()语句在app模块中导入该模块：

export class ErrorModule {
    static forRoot() {
        return {
            ngModule: ErrorModule,
            providers: [
                {
                    provide: HTTP_INTERCEPTORS,
                    useClass: ErrorRequestInterceptor,
                    multi: true,
                }
            ]
        };
    }
}

但它没有改变任何东西，拦截器构造函数仍然没有触发。

更新：无需forRoot()方法。我错过了错误模块提供程序中的ErrorCustomHandler注入服务。

ErrorCustomHandler,
{
    provide: HTTP_INTERCEPTORS,
    useClass: ErrorRequestInterceptor,
    multi: true,
}

LATE UPDATE（25/10/2018）：拦截器已经很长时间了，因为我忘了在适当的时候提供解决方案，我将在这里添加修改后的源代码。

更改位于error.module.ts文件中：

providers: [
    ErrorService,
    {
        provide: ErrorHandler,
        useClass: ErrorCustomHandler
    },
    ErrorCustomHandler,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorRequestInterceptor,
        multi: true,
    }
]

ErrorCustomHandler类现已注册为提供者。

实例化角度拦截器

0 个答案: