http interceptor angular 6
¿Qué es httpinterceptor equivalente en angular2? (10)
En angularjs, tenemos interceptor http
$httpProvider.interceptors.push(''myHttpInterceptor'');
con el que podemos conectar todas las llamadas http, y mostrar u ocultar barras de carga, hacer registros, etc.
¿Cuál es el equivalente en angular2?
Angular2 no admite httpinterceptor como angular1
Aquí hay un ejemplo impresionante del uso de httpinterceptor en angular2.
Como lo señaló @ Günter, no hay forma de registrar interceptores.
Necesita extender la clase
Http
y poner su procesamiento de intercepción alrededor de las llamadas HTTP
Primero, podría crear una clase que extienda el
Http
:
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
console.log(''request...'');
return super.request(url, options).catch(res => {
// do something
});
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
console.log(''get...'');
return super.get(url, options).catch(res => {
// do something
});
}
}
y regístralo como se describe a continuación:
bootstrap(AppComponent, [HTTP_PROVIDERS,
new Provider(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
})
]);
Los tipos
request
y
requestError
podrían agregarse antes de llamar a los métodos de destino.
Para la
response
, debe conectar un procesamiento asincrónico en la cadena de procesamiento existente.
Esto depende de su necesidad, pero puede usar operadores (como
flatMap
) de Observable.
Finalmente para el
responseError
uno, debe llamar al operador
catch
en la llamada de destino.
De esta forma, se le notificará cuando ocurra un error en la respuesta.
Estos enlaces pueden ayudarte:
Como señaló @squadwuschel, se está trabajando para obtener esta funcionalidad en @ angular / http. Esto será en forma de una nueva API HttpClient.
Consulte https://github.com/angular/angular/pull/17143 para obtener más detalles y el estado actual.
Con la versión Angular 4.3.1, ahora hay una interfaz llamada HttpInterceptor .
Aquí está el enlace a los documentos: angular.io/api/common/http/HttpInterceptor
Aquí hay una muestra de implementación.
Esta sería la implementación de la clase interceptor.
Básicamente está escrito como cualquier otro servicio:
@Injectable()
export class ExceptionsInterceptor implements HttpInterceptor {
constructor(
private logger: Logger,
private exceptionsService: ExceptionsService,
private notificationsService: NotificationsService
) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.do((event) => {
// Do nothing here, manage only errors
}, (err: HttpErrorResponse) => {
if (!this.exceptionsService.excludeCodes.includes(err.status)) {
if (!(err.status === 400 && err.error[''_validations''])) {
this.logger.error(err);
if (!this.notificationsService.hasNotificationData(err.status)) {
this.notificationsService.addNotification({ text: err.message, type: MessageColorType.error, data: err.status, uid: UniqueIdUtility.generateId() });
}
}
}
});
}
}
Luego, como lo tratará como un servicio normal, debe agregar esta línea dentro de los proveedores del módulo de la aplicación:
{ provide: HTTP_INTERCEPTORS, useClass: ExceptionsInterceptor, multi: true }
Espero que pueda ayudar.
Hay una implementación para un servicio Http @ angular / core-like en este repositorio: https://github.com/voliva/angular2-interceptors
Simplemente declara el proveedor de ese servicio en bootstrap, agregando los interceptores que necesite, y estará disponible para todos los componentes.
import { provideInterceptorService } from ''ng2-interceptors'';
@NgModule({
declarations: [
...
],
imports: [
...,
HttpModule
],
providers: [
MyHttpInterceptor,
provideInterceptorService([
MyHttpInterceptor,
/* Add other interceptors here, like "new ServerURLInterceptor()" or
just "ServerURLInterceptor" if it has a provider */
])
],
bootstrap: [AppComponent]
})
He lanzado el interceptor con el siguiente módulo de nodo. Creamos este módulo para nuestro propósito interno, finalmente lanzamos en npm package manager npm install angular2-resource-and-ajax-interceptor https://www.npmjs.com/package/angular2-resource-and-ajax-interceptor
Pruebe Covalent de Teradata , que proporciona muchas extensiones para material angular y angular.
Verifique HTTP parte HTTP , proporciona el interceptor http faltante en Angular y RESTService (similar a restangular).
He implementado la autenticación de token JWT a través de HTTP en mi muestra, verifique aquí.
https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts
Lea mis notas de desarrollo para ello, maneje la autenticación basada en token a través de IHttpInterceptor .
Angular 4.3 ahora es compatible con el interceptor Http listo para usar. Vea cómo usarlos: https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors
PRIVADO DESDE Angular 4.3 (HttpInterCeptors están de vuelta en 4.3)
Puede crear su propia clase HTTP personalizada y utilizar el Servicio sujeto sujeto de rxjs para reutilizar su clase Http personalizada e implementar sus comportamientos en una clase personalizada.
Implementación de su clase Http personalizada con "HttpSubjectService" que contiene algunos temas de rxjs.
import { Injectable } from ''@angular/core'';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response } from ''@angular/http'';
import { Observable } from ''rxjs/Observable'';
import { HttpSubjectService } from ''./httpSubject.service'';
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private httpSubjectService: HttpSubjectService) {
super(backend, defaultOptions);
//Prevent Ajax Request Caching for Internet Explorer
defaultOptions.headers.append("Cache-control", "no-cache");
defaultOptions.headers.append("Cache-control", "no-store");
defaultOptions.headers.append("Pragma", "no-cache");
defaultOptions.headers.append("Expires", "0");
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
//request Start;
this.httpSubjectService.addSpinner();
return super.request(url, options).map(res => {
//Successful Response;
this.httpSubjectService.addNotification(res.json());
return res;
})
.catch((err) => {
//Error Response.
this.httpSubjectService.removeSpinner();
this.httpSubjectService.removeOverlay();
if (err.status === 400 || err.status === 422) {
this.httpSubjectService.addHttp403(err);
return Observable.throw(err);
} else if (err.status === 500) {
this.httpSubjectService.addHttp500(err);
return Observable.throw(err);
} else {
return Observable.empty();
}
})
.finally(() => {
//After the request;
this.httpSubjectService.removeSpinner();
});
}
}
Módulo personalizado para registrar su clase CustomHttp: aquí sobrescribe la implementación Http predeterminada de Angular con su propia Implementación CustomHttp.
import { NgModule, ValueProvider } from ''@angular/core'';
import { HttpModule, Http, XHRBackend, RequestOptions } from ''@angular/http'';
//Custom Http
import { HttpSubjectService } from ''./httpSubject.service'';
import { CustomHttp } from ''./customHttp'';
@NgModule({
imports: [ ],
providers: [
HttpSubjectService,
{
provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, httpSubjectService: HttpSubjectService) => {
return new CustomHttp(backend, defaultOptions, httpSubjectService);
},
deps: [XHRBackend, RequestOptions, HttpSubjectService]
}
]
})
export class CustomHttpCoreModule {
constructor() { }
}
ahora necesitamos la implementación HttpSubjectService donde podemos suscribir a nuestros sujetos rxjs cuando se les llama con la declaración "siguiente".
import { Injectable } from ''@angular/core'';
import { Subject } from ''rxjs/Subject'';
@Injectable()
export class HttpSubjectService {
//https://github.com/ReactiveX/rxjs/blob/master/doc/subject.md
//In our app.component.ts class we will subscribe to this Subjects
public notificationSubject = new Subject();
public http403Subject = new Subject();
public http500Subject = new Subject();
public overlaySubject = new Subject();
public spinnerSubject = new Subject();
constructor() { }
//some Example methods we call in our CustomHttp Class
public addNotification(resultJson: any): void {
this.notificationSubject.next(resultJson);
}
public addHttp403(result: any): void {
this.http403Subject.next(result);
}
public addHttp500(result: any): void {
this.http500Subject.next(result);
}
public removeOverlay(): void {
this.overlaySubject.next(0);
}
public addSpinner(): void {
this.spinnerSubject.next(1);
}
public removeSpinner(): void {
this.spinnerSubject.next(-1);
}
}
para llamar a sus implementaciones personalizadas, debemos suscribirnos a los temas en, por ejemplo, "app.component.ts".
import { Component } from ''@angular/core'';
import { HttpSubjectService } from "../HttpInterception/httpSubject.service";
import { Homeservice } from "../HttpServices/home.service";
@Component({
selector: ''app'',
templateUrl: ''./app.component.html'',
})
export class AppComponent {
private locals: AppLocalsModel = new AppLocalsModel();
constructor(private httpSubjectService : HttpSubjectService, private homeService : Homeservice) {}
ngOnInit(): void {
this.notifications();
this.httpRedirects();
this.spinner();
this.overlay();
}
public loadServiceData(): void {
this.homeService.getCurrentUsername()
.subscribe(result => {
this.locals.username = result;
});
}
private overlay(): void {
this.httpSubjectService.overlaySubject.subscribe({
next: () => {
console.log("Call Overlay Service");
}
});
}
private spinner(): void {
this.httpSubjectService.spinnerSubject.subscribe({
next: (value: number) => {
console.log("Call Spinner Service");
}
});
}
private notifications(): void {
this.httpSubjectService.notificationSubject.subscribe({
next: (json: any) => {
console.log("Call Notification Service");
}
});
}
private httpRedirects(): void {
this.httpSubjectService.http500Subject.subscribe({
next: (error: any) => {
console.log("Navigate to Error Page");
}
});
this.httpSubjectService.http403Subject.subscribe({
next: (error: any) => {
console.log("Navigate to Not Authorized Page");
}
});
}
}
class AppLocalsModel {
public username : string = "noch nicht abgefragt";
}
DESDE ANGULAR 4.3 puede usar InterCeptors
En Angular 4.3 tiene interceptores nativos donde puede implementar sus propias cosas como una redirección para el error 500 del servidor
import { Injectable } from ''@angular/core'';
import { Router } from ''@angular/router'';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from ''@angular/common/http'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/do'';
import ''rxjs/add/operator/catch'';
import ''rxjs/add/observable/throw'';
@Injectable()
export class SxpHttp500Interceptor implements HttpInterceptor {
constructor(public router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).do(evt => { }).catch(err => {
if (err["status"]) {
if (err.status === 500) {
this.router.navigate([''/serverError'', { fehler: JSON.stringify(err) }]);
}
}
return Observable.throw(err);
});
}
}
necesita registrar esto en su módulo principal en la matriz de proveedores
import { HTTP_INTERCEPTORS } from ''@angular/common/http'';
import { Router } from ''@angular/router'';
import { SxpHttp500Interceptor } from "./sxpHttp500.interceptor";
....
providers: [
{
provide: HTTP_INTERCEPTORS, useFactory: (router: Router) => { return new SxpHttp500Interceptor(router) },
multi: true,
deps: [Router]
}
]
actualizar
El nuevo módulo
HttpClient
introducido en Angular 4.3.0 admite interceptores
https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0
feat (común): nueva API HttpClient HttpClient es una evolución de la API HTTP angular existente, que existe junto a ella en un paquete separado, @ angular / common / http. Esta estructura garantiza que las bases de código existentes puedan migrar lentamente a la nueva API.
La nueva API mejora significativamente la ergonomía y las características de la API heredada. Una lista parcial de nuevas características incluye:
- Acceso de cuerpo de respuesta síncrona mecanografiada, incluida compatibilidad con tipos de cuerpo JSON
- JSON es un valor predeterminado asumido y ya no necesita ser analizado explícitamente
- Los interceptores permiten que la lógica de middleware se inserte en la tubería
- Solicitud inmutable / objetos de respuesta
- Eventos de progreso para la carga de solicitudes y la descarga de respuestas
- Verificación posterior a la solicitud y marco de prueba basado en vaciado
original
Angular2 no tiene (todavía) interceptores.
En su lugar, puede extender
Http
,
XHRBackend
,
BaseRequestOptions
o cualquiera de las otras clases involucradas (al menos en TypeScript y Dart (no sé acerca de JS simple).
Ver también