¿Qué es httpinterceptor equivalente en angular2?

En angularjs, tenemos un interceptor http

$httpProvider.interceptors.push('myHttpInterceptor'); 

con el que podemos conectarnos a todas las llamadas http, y mostrar u ocultar barras de carga, hacer logging, etc.

¿Cuál es el equivalente en angular2?

Como lo señaló @ Günter, no hay forma de registrar interceptores. Necesita extender la clase Http y poner su procesamiento de interceptación alrededor de las llamadas HTTP

Primero podrías crear una clase que amplíe la Http :

 @Injectable() export class CustomHttp extends Http { constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { super(backend, defaultOptions); } request(url: string | Request, options?: RequestOptionsArgs): Observable { console.log('request...'); return super.request(url, options).catch(res => { // do something }); } get(url: string, options?: RequestOptionsArgs): Observable { console.log('get...'); return super.get(url, options).catch(res => { // do something }); } } 

y registrarlo 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 se pueden agregar antes de llamar a los métodos de destino.

Para la response uno, necesita conectar algún 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 objective. De esta manera, se le notificará cuando se produzca un error en la respuesta.

Estos enlaces pueden ayudarte a:

  • Manejo de tokens de actualización usando rxjs
  • Angular 2 – Cómo obtener Observable.throw globalmente

actualizar

El nuevo módulo HttpClient presentado en Angular 4.3.0 admite interceptores https://github.com/angular/angular/compare/4.3.0-rc.0…4.3.0

feat (común): new HttpClient API HttpClient es una evolución de la Angular HTTP API 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 funciones de la API heredada. Una lista parcial de nuevas características incluye:

  • Acceso al cuerpo de respuesta síncrono y tipado, que incluye soporte para los tipos de cuerpos JSON
  • JSON es un supuesto predeterminado y ya no necesita ser analizado explícitamente
  • Los interceptores permiten que la lógica del middleware se inserte en la tubería
  • Objetos de solicitud / respuesta inmutables
  • Eventos de progreso para carga de solicitud y descarga de respuesta
  • Marco de prueba basado en verificación y verificación posterior a la solicitud

original

Angular2 no tiene (aún) interceptores. En su lugar, puede ampliar Http , XHRBackend , BaseRequestOptions o cualquiera de las otras clases implicadas (al menos en TypeScript y Dart (no sé acerca de JS simple).

Ver también

  • RFC: interceptores y transformadores de Http
  • Introduzca un mecanismo de interceptación
  • Interceptores en Angular2
  • Angular2: establezca encabezados para cada solicitud

Hay una implementación para un servicio Http @ angular / core-like en este repository: https://github.com/voliva/angular2-interceptors

Simplemente declara el proveedor de ese servicio en arranque, agregando los interceptores que necesita, 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] }) 

DEPRICADO DESDE Angular 4.3 (HttpInterCeptors están de vuelta en 4.3)

Puede crear su propia Clase HTTP personalizada y usar el Servicio de Asunto 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 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 { //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 SubScribir a nuestros sujetos de rxjs cuando se les llame con la siguiente statement.

 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 las implementaciones personalizadas que necesitamos para suscribirse 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 tienes Interceptores nativos donde puedes implementar tus propias cosas como una redirección por error de servidor 500

 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, next: HttpHandler): Observable> { 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 los proveedores Matriz

 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] } ] 

Con la versión Angular 4.3.1, ahora hay una interfaz llamada HttpInterceptor .

Aquí está el enlace a los documentos: https://angular.io/api/common/http/HttpInterceptor

Aquí hay una muestra de implementación.


Esta sería la implementación de la clase de 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, next: HttpHandler): Observable> { 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() }); } } } }); } } 

Entonces, como tratará esto como un servicio normal, debe agregar esta línea dentro de los proveedores de su módulo de aplicación:

 { provide: HTTP_INTERCEPTORS, useClass: ExceptionsInterceptor, multi: true } 

Espero que pueda ayudar.

Angular 4.3 ahora admite Http interceptor listo para usar. Consulte cómo usarlos: https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors

He liberado el interceptor con el siguiente módulo de nodo. Fuimos a crear este módulo para nuestro propósito interno, finalmente lo lanzamos en el administrador de paquetes npm npm instalar angular2-resource-y-ajax-interceptor https://www.npmjs.com/package/angular2-resource-and-ajax-interceptor

Como señaló @squadwuschel, se está trabajando para obtener esta funcionalidad en @ angular / http. Esto será en la forma de una nueva API de HttpClient.

Vea https://github.com/angular/angular/pull/17143 para más detalles y estado actual.

Angular2 no admite httpinterceptor como angular1

Aquí hay un ejemplo impresionante de uso de httpinterceptor en angular2.

https://github.com/NgSculptor/ng2HttpInterceptor

Pruebe Covalent de Teradata , proporcionan muchas extensiones para el material angular y angular.

Verifique la parte HTTP , proporciona el interceptor http faltante en servicios angulares y RESTS (similar a restangular).

Implementé la autenticación de tokens JWT a través de HTTP covalente en mi muestra. Por favor, marque aquí.

https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts

Lea mis notas de desarrollo para él, maneje la autenticación basada en token a través de IHttpInterceptor .