mise à jour

le nouveau module HttpClient introduit en angle 4.3.0 supporte les intercepteurs https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0

l'exploit(commune): nouvelle HttpClient API HttpClient est une évolution de la API HTTP angulaire existante, qui existe à côté d'elle dans un paquet, @angulaire/common/http. Cette structure s'assure que les existants les bases de codes peuvent migrer lentement vers la nouvelle API.

la nouvelle API améliore considérablement l'ergonomie et les fonctionnalités de l'héritage de l'API. Une liste partielle des nouvelles fonctionnalités comprend:

• accès au corps de réponse synchrone dactylographié, y compris le support pour les types de corps JSON
• JSON est un défaut supposé et n'a plus besoin d'être explicitement analysé." Intercepteurs
• permettre à middleware logic d'être inséré dans le pipeline
• Immuable de requête/réponse objets
• événements de Progression pour les deux demande de télécharger et d'intervention télécharger
• Post-demande de vérification et de chasse basé sur un framework de test

original

Angular2 n'a pas (encore) d'intercepteurs. Vous pouvez étendre Http , XHRBackend , BaseRequestOptions ou n'importe laquelle des autres classes impliquées (au moins dans TypeScript et Dart (ne sait pas à propos de plain JS).

Voir aussi

• RFC: Http intercepteurs et les transformateurs
• introduire un mécanisme d'interception
• intercepteurs en Angular2
• Angular2-en-têtes pour chaque requête

il y a une implémentation pour un service de type Http @angular/core dans ce dépôt: https://github.com/voliva/angular2-interceptors

vous venez de déclarer le fournisseur de ce service sur bootstrap, en ajoutant les intercepteurs dont vous avez besoin, et il 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]
})

déprécié depuis L'angle 4.3 (HttpInterCeptors are Back in 4.3)

vous pouvez créer votre propre classe HTTP personnalisée et utiliser rxjs Subject Service pour réutiliser votre classe Http personnalisée et mettre en œuvre vos comportements dans une classe personnalisée.

implémentation de votre classe Http personnalisée avec" HttpSubjectService " qui contient quelques 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 CustomHttp classe - ici, vous écrasez L'implémentation Http par défaut D'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() { }
}

maintenant nous avons besoin de L'implémentation HttpSubjectService où nous pouvons souscrire à nos sujets rxjs quand ils sont appelés avec la déclaration "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 nous abonner aux sujets de l'application par exemple".composant.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";
}

Depuis L'angle 4.3 vous pouvez utiliser des intercepteurs

en angle 4.3 vous avez des intercepteurs natifs où vous pouvez implémenter vos propres trucs comme une redirection Pour 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 core dans le tableau 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 libération angulaire 4.3.1, il y a maintenant une interface appelée HttpInterceptor .

voici le lien vers les documents: https://angular.io/api/common/http/HttpInterceptor

voici un exemple d'implémentation.

ce serait l'implémentation de la classe interceptor.

est essentiellement écrit comme tout 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() });
                        }
                    }
                }
            });
    }
}

alors comme vous allez traiter cela comme un service normal, vous devez ajouter cette ligne dans les fournisseurs de votre module app:

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

J'espère que ça peut aider.

Angular 4.3 supporte maintenant L'intercepteur Http out-of-the-box. Vérifier comment les utiliser: https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors

j'ai libéré interceptor avec le module de noeud suivant. Nous avons créé ce module pour notre usage interne finalement nous avons publié dans npm package manager npm install angular2-ressources-et-ajax-intercepteur 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é dans @angular/http. Ce sera sous la forme d'une nouvelle API HttpClient.

voir https://github.com/angular/angular/pull/17143 pour plus de détails et le statut actuel.

Angular2 donot soutien httpinterceptor comme angular1

voici un exemple impressionnant d'utilisation de httpinterceptor en angular2.

https://github.com/NgSculptor/ng2HttpInterceptor

Try Covalent de Teradata , ils fournissent beaucoup d'extensions pour les matériaux angulaires et angulaires.

Vérifier HTTP partie, il fournit le manque http intercepteur Angulaire et RESTService(similaire à restangular).

j'ai implémenté l'authentification JWT par token via covalent HTTP dans mon échantillon, veuillez vérifier ici.

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

Read my développement des notes pour elle, Poignée de jeton d'Authentification à base de via IHttpInterceptor .