HttpInterceptors 处理 http 错误 Angular 4.3

Question

我正在尝试使用一个简单的 http get 来使用 rest api。当没有注册时，我的 api 响应会出现这样的错误 500：

{ "errors": [ { "code": "500", "message": "no registers." } ]}

所以，我想知道如何编写一个拦截器来处理所有类型的 http 错误，以防止在浏览器控制台记录错误。

我的 app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { sharedConfig } from './app.module.shared';
import 'rxjs/add/operator/toPromise';
import { NoopInterceptor } from "./app.interceptor";

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        ...sharedConfig.imports
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NoopInterceptor,
            multi: true,
        }
    ]
})
export class AppModule {
}

我的 app.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const started = Date.now();

        return next.handle(req)
        .do(event => {
            debugger;
            if (event instanceof HttpResponse) {
                const elapsed = Date.now() - started;
                console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
            }          
        });

    }
}

我的 app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Config } from "./app.constantes";

@Injectable()
export class AppService {
    protected config: Config;
    constructor(private http: HttpClient) {
        this.config = new Config();            
    }   

    get(service: string, complementos?: any, parametros?: any) {
        var complemento = complementos != null && complementos.length > 0 ? complementos.join('/') : '';
        var url = this.config.SERVER + service + this.config.TOKEN + '/' + complemento;
         return this.http.get(this.config.SERVER + service + this.config.TOKEN + '/' + complemento);
    }

}

compra.component.ts 是我打电话的地方

 consultaPeriodoCompra(mes: any): void {
        var lista = null;

        this.service.get(this.config.CONSULTA_ULTIMAS_COMPRAS, ['2', mes.anoMes])
            .subscribe((response) => {               

                this.atualizaLista(mes, response['payload'].listaTransacao);
            },
            (err) => {                    
                this.atualizaLista(mes, []);
            });

    }

that it's what i want to prevent

Answer 1

其实不可能实现你想要的，只是浏览器默认行为，见jeff的回复@angular的github：

https://github.com/angular/angular/issues/8832

Answer 2

我不太了解你的目标，但是如果你需要处理由 ajax 调用引起的错误，你需要对 observable .onError 函数做出反应

this.httpService.get(url)
.subscribe(
    // onnext
    () => [...],
    // onError
   (err) => [...]
);

然而，onError 回调被视为一个终端事件，如果你想继续流，你应该使用 .catch 操作符

如果您说的是 angularjs 拦截器，恐怕目前还没有我所知道的解决方案。但是您可以在服务中轻松实现此类功能。 大多数情况下，错误解决方案是多种多样的，因此除非您在应用范围内构建审计服务或加载栏，否则最好的方法是应用更​​具体的逻辑

Answer 3

您可以使用扩展 ErrorHandler 的 GlobalErrorHandler 并实现 handleError() 方法。它不应该把它扔给浏览器。