HTTPエラーを処理するHttpInterceptorsは、角度4.3を返します。

Question

私は簡単なhttpを取得して、残りの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, []); 
      }); 

    } 

私は本当にあなたの目標を理解していますが、AJAXによって引き起こされるエラーを処理する必要がある場合は、しかし、観測可能.onError機能に

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

を反応させるために必要な呼び出し、のonErrorコールバックがあるいけない

that it's what i want to prevent

Answer 1

実際には実現できないことは、デフォルトのブラウザ行動、角度のgithubの@ジェフの応答を参照してください。

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

Answer 2

終了イベントとして扱う場合は、.catch演算子を使用する必要があります。

anglejsインターセプタについては、私の知る限り現在の解決策はありません。しかし、あなたは簡単にあなたのサービスの中でそのような機能を達成することができます。 ほとんどの場合、エラー解決はさまざまです。監査サービスやローディングバーを作成していない場合は、より具体的なロジックを適用することをお勧めします。

Answer 3

あなたはErrorHandlerを拡張GlobalErrorHandlerを使用するとhandleErrorの（）メソッドを実装することができます。それはブラウザにそれを投げてはいけません。