HttpInterceptors handles HTTP Angular 4.3 errors
I am trying to get a rest api using a simple http get. When there is no 500 error like this in my api answer:
{ "errors": [ { "code": "500", "message": "no registers." } ]}
So, they are wondering how I can write an interceptor to handle all kinds of HTTP errors to prevent the console from logging error @browsers.
My 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 {
}
My 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.`);
}
});
}
}
My 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 is where I get the call
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, []);
});
}
source to share
I don't really understand your purpose, but if you need to handle the error caused by the ajax call, you need to react to the observable .onError function
this.httpService.get(url)
.subscribe(
// onnext
() => [...],
// onError
(err) => [...]
);
However, onError callbacks are treated as a terminal event, in case you want to continue the stream you must use the .catch statement
If you are talking about angularjs interceptor I am afraid there is no current solution as I know. But you can easily achieve this functionality inside your services. In most cases, error resolution varies, so unless you are creating an audit service or loading bar in your application, more specific logic is the best approach.
source to share