Quel est l'équivalent httpinterceptor dans angular2?
Dans angularjs, nous avons un intercepteur http
$httpProvider.interceptors.Push('myHttpInterceptor');
avec lequel on peut se connecter à tous les appels http, afficher ou masquer les barres de chargement, se connecter, etc.
Quel est l'équivalent dans angular2?
Comme @ Günter l'a souligné, il n'y a aucun moyen d'enregistrer des intercepteurs. Vous devez étendre la classe Http et placer votre traitement d'interception autour des appels HTTP.
Tout d'abord, vous pouvez créer une classe qui étend le 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
});
}
}
et enregistrez-le comme décrit ci-dessous:
bootstrap(AppComponent, [HTTP_PROVIDERS,
new Provider(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
})
]);
Les types request et requestError peuvent être ajoutés avant d'appeler les méthodes cibles.
Pour le response, vous devez intégrer un traitement asynchrone à la chaîne de traitement existante. Cela dépend de vos besoins mais vous pouvez utiliser des opérateurs (comme flatMap) de Observable.
Enfin, pour le responseError, vous devez appeler l’opérateur catch de l’appel cible. De cette façon, vous serez averti lorsqu'une erreur se produit dans la réponse.
Ces liens pourraient vous aider:
mettre à jour
Le nouveau module HttpClient introduit dans Angular 4.3.0 prend en charge les intercepteurs https://github.com/angular/angular/compare/4.3.0-rc.). 0 ... 4.3.
feat (common): nouvelle API HttpClient HttpClient est une évolution de l'API HTTP existante Angular, qui existe à côté de @ angular/common/http. Cette structure garantit que les bases de code existantes peuvent migrer lentement vers la nouvelle API.
La nouvelle API améliore considérablement l'ergonomie et les fonctionnalités de l'API héritée. Une liste partielle des nouvelles fonctionnalités comprend:
- Accès typé et synchrone au corps de réponse, avec prise en charge des types de corps JSON
- JSON est une valeur par défaut supposée et ne doit plus être explicitement analysé.
- Les intercepteurs permettent d'insérer une logique middleware dans le pipeline
- Objets de demande/réponse immuables
- Événements de progression pour le téléchargement de demande et le téléchargement de réponse
- Cadre de test basé sur la vérification et la vérification post-demande
original
Angular2 n'a pas (encore) d'intercepteurs. Vous pouvez plutôt étendre Http, XHRBackend, BaseRequestOptions ou n’importe laquelle des autres classes impliquées (au moins dans TypeScript et Dart (je ne connais pas Plain JS).
Voir également
Il existe une implémentation pour un service Http @ angular/core-like dans ce référentiel: https://github.com/voliva/angular2-interceptors
Vous déclarez simplement le fournisseur de ce service au démarrage, en ajoutant les intercepteurs dont vous avez besoin, et ce dernier sera disponible pour tous les composants.
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]
})
DEPRICATED SINCE Angular 4.3 (Les HttpInterCeptors sont de retour dans 4.3))
Vous pouvez créer votre propre classe HTTP personnalisée et utiliser le service de sujet rxjs pour réutiliser votre classe HTTP personnalisée et implémenter vos comportements dans une classe personnalisée.
Implémentation de votre classe HTTP personnalisée avec "HttpSubjectService" qui contient des sujets 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();
});
}
}
Module personnalisé pour enregistrer votre classe CustomHttp - ici, vous écrasez l'implémentation Http par défaut de Angular) avec votre propre implémentation 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() { }
}
nous avons maintenant besoin de l'implémentation HttpSubjectService, dans laquelle nous pouvons souscrire à nos sujets rxjs lorsqu'ils sont appelés avec l'instruction "next".
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);
}
}
pour appeler vos implémentations personnalisées, nous devons souscrire aux Sujets, par exemple. "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";
}
SINCE ANGULAR 4.3, vous pouvez utiliser InterCeptors
Dans Angular 4.3, vous avez des intercepteurs natifs où vous pouvez implémenter vos propres données, comme une redirection pour une erreur de serveur 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<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);
});
}
}
vous devez l'enregistrer dans votre module principal dans le tableau Array des fournisseurs
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]
}
]
Avec la version Angular 4.3.1), il existe désormais une interface appelée HttpInterceptor .
Voici le lien vers la documentation: https://angular.io/api/common/http/HttpInterceptor
Voici un exemple d'implémentation.
Ce serait l'implémentation de classe d'intercepteur.
Est fondamentalement écrit comme n'importe quel autre service:
@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() });
}
}
}
});
}
}
Ensuite, puisque vous traitez cela comme un service normal, vous devez ajouter cette ligne dans les fournisseurs de votre module d'application:
{ provide: HTTP_INTERCEPTORS, useClass: ExceptionsInterceptor, multi: true }
J'espère que ça peut aider.
4.3 angulaire prend désormais en charge l’intercepteur Http prêt à l’emploi. Découvrez comment les utiliser: https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors
J'ai publié interceptor avec le module de noeud suivant. Nous avons créé ce module pour notre usage interne. Enfin, nous avons publié le gestionnaire de paquets npm . Npm install angular2-resource-and-ajax-interceptor https://www.npmjs.com/package/angular2-resource-and-ajax-interceptor
Comme @squadwuschel l'a souligné, des travaux sont en cours pour intégrer cette fonctionnalité à @ angular/http. Ce sera sous la forme d'une nouvelle API HttpClient.
Voir https://github.com/angular/angular/pull/1714 pour plus de détails et l'état actuel.
Essayez Covalent de Teradata , ils fournissent de nombreuses extensions pour Angular et Angular Material.
Vérifiez HTTP partie, il fournit l’intercepteur http manquant dans Angular et RESTService (similaire à restangular).
J'ai implémenté l'authentification de jeton JWT via HTTP covalent dans mon exemple, veuillez vérifier ici.
https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts
Lisez mes notes de développement à ce sujet, Gestion de l'authentification basée sur un jeton via IHttpInterceptor .
Angular2 ne supporte pas httpinterceptor comme angular1
Voici un exemple impressionnant d'utilisation de httpinterceptor dans angular2.