Wenn Sie eine Anwendung mit AngularJS entwickelt haben, sind Ihnen HTTP-Interceptoren wahrscheinlich bekannt. Diese HTTP-Interceptoren waren in Angular jedoch erst ab Version 4.3 verfügbar. In diesem Tutorial werden wir Interceptoren in Angular verwenden, um HTTP-Anfragen und -Antworten zu verarbeiten und Fehler zu behandeln.
Voraussetzungen
Angular-Anwendungen verwenden die Node.js-Laufzeitumgebung. Um dieses Tutorial abzuschließen, müssen Sie Node.js auf Ihrem Computer installiert haben. Glücklicherweise ist Node.js recht einfach zu installieren. Wir haben hier eine vollständige Anleitung zur Installation von Node.js auf Ubuntu 18.04.
Darüber hinaus ist es von Vorteil, wenn Sie Angular kennen und mit der Verwendung des Angular CLI vertraut sind, um Angular-Anwendungen zu erstellen. Wir werden Node v8.12.0 und npm v6.4.1 verwenden.
Schritt 1: Angular-App erstellen
Lassen Sie uns zu Beginn eine neue Angular-App mit der Angular CLI erstellen. Wir nennen unsere Anwendung Angular-Interceptor. Führen Sie den folgenden Befehl aus, um die App zu erstellen:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Sie werden nach einigen Optionen gefragt. Geben Sie die Standardwerte ein und fahren Sie fort:
Navigieren Sie als Nächstes in das Anwendungsverzeichnis und führen Sie den folgenden Befehl aus, um die Anwendung zu starten:
|
1 |
npx ng serve --open |
Rufen Sie anschließend http://localhost:4200 in Ihrem Browser auf, um die App zu sehen. Sie haben nun eine grundlegende Angular-App konfiguriert.
Schritt 2: Angular-App stylen
Hier werden wir unsere Angular-App mit Angular Material stylen. Um Angular Material in Ihrem Projekt zu installieren, führen Sie den folgenden Befehl aus:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Dadurch wird @angular/material, @angular/cdk und @angular/animation in Ihrem Projekt installiert. Als Nächstes werden wir eine Animation im Projekt einrichten. Fügen Sie BrowserAnimationsModule in Ihrer src/app/module.ts-Datei hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ ... BrowserAnimationsModule ], ... }) export class AppModule { } |
Wir werden die Dialog-Komponente von Angular Material verwenden. Um die Dialog-Komponente zu verwenden, müssen wir MatDialogModule in der src/app/app.module.ts-Datei importieren:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Um die Benutzeroberfläche ansprechender zu gestalten, fügen wir indigo-pink.css zu Ihrer styles.scss-Datei hinzu:
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Schritt 3: Erstellen Sie Ihren Angular-Interceptor
Unter dem Ordner app erstellen wir einen neuen Ordner namens interceptor. Erstellen Sie in diesem neu erstellten Ordner eine neue httpconfig.interceptor.ts-Datei.
Wir müssen einige Abhängigkeiten in unsere httpconfig.interceptor.ts importieren, damit unser Interceptor funktioniert. Diese Abhängigkeiten sind HttpInterceptor, HttpRequest, HttpResponse und HttpHandler, HttpEvent, HttpErrorResponse.
Unsere httpconfig.interceptor.ts-Datei wird nach dem Import wie folgt aussehen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { map, catchError } from 'rxjs/operators'; |
Erstellen Sie als Nächstes eine Klasse HttpConfigInterceptor und implementieren Sie das Interface HttpInterceptor. Dies ist ein Beispiel:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Fügen Sie den folgenden Code in die httpconfig.interceptor.ts -Datei ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token: string = localStorage.getItem('token'); if (token) { request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) }); } if (!request.headers.has('Content-Type')) { request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') }); } request = request.clone({ headers: request.headers.set('Accept', 'application/json') }); return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; })); } } |
Damit es funktioniert, müssen wir httpconfig.interceptor.ts in unserer app.module.ts -Datei importieren:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; ... import { HttpConfigInterceptor } from './interceptor/httpconfig.interceptor'; @NgModule({ ... imports: [ ... HttpClientModule ], ... }) |
Fügen Sie HttpConfigInterceptor zu providers hinzu. Wir setzen multi: auf true , um mehrere Interceptoren zu verarbeiten:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
Im nächsten Abschnitt werden wir unseren Service zur Fehlerbehandlung erstellen.
Schritt 4: Service zur Fehlerbehandlung
Hier werden wir Code zur Fehlerbehandlung schreiben. Wir müssen die Fehler erfassen und sie den Endbenutzern angemessen anzeigen. Kurz gesagt sind dies die Schritte, denen wir folgen werden:
- Erstellen Sie einen Ordner namens error-dialog im app -Ordner.
- Erstellen Sie einen Service für Fehler namens errorDialogService in einer Datei namens errordialog.service.ts.
- Fügen Sie den folgenden Code ein in die errordialog.service.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Injectable } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ErrorDialogComponent } from './errordialog.component'; @Injectable() export class ErrorDialogService { public isDialogOpen: Boolean = false; constructor(public dialog: MatDialog) { } openDialog(data): any { if (this.isDialogOpen) { return false; } this.isDialogOpen = true; const dialogRef = this.dialog.open(ErrorDialogComponent, { width: '300px', data: data }); dialogRef.afterClosed().subscribe(result => { console.log('Der Dialog wurde geschlossen'); this.isDialogOpen = false; let animal; animal = result; }); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-root', templateUrl: './errordialog.component.html' }) export class ErrorDialogComponent { title = 'Angular-Interceptor'; constructor(@Inject(MAT_DIALOG_DATA) public data: string) {} } |
|
1 2 3 4 5 6 7 8 9 10 |
<div> <div> <p> Grund: {{data.reason}} </p> <p> Status: {{data.status}} </p> </div> </div> |
Zusammenfassend listen wir die folgenden Schritte auf:
- Beginnen Sie mit dem Importieren von errordialog.service.
- Anschließend fügen wir den Konstruktor für errorDialogService.
- Wir werden auch den Code hinzufügen, um die Fehlerantwort zu verarbeiten, unter Verwendung von catchError und throwError.
- Importieren Sie errordialog.service und errordialog.component in das AppModule.
Nachdem wir die Änderungen vorgenommen haben, werden zwei Dateien geändert: app.module.ts und httpconfig.interceptor.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... import { ErrorDialogComponent } from './error-dialog/errordialog.component'; ... import { ErrorDialogService } from './error-dialog/errordialog.service'; ... @NgModule({ ... declarations: [ ... ErrorDialogComponent ], ... providers: [ ... ErrorDialogService ], entryComponents: [ErrorDialogComponent], }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
... import { ErrorDialogService } from '../error-dialog/errordialog.service'; ... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { constructor(public errorDialogService: ErrorDialogService) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ... return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; }), catchError((error: HttpErrorResponse) => { let data = {}; data = { reason: error && error.error && error.error.reason ? error.error.reason : '', status: error.status }; this.errorDialogService.openDialog(data); return throwError(error); })); } } |
Schritt 5: Erstellen von Beispiel-Services
In diesem Schritt werden wir zwei Services als Beispiel erstellen:
- Login-API
- Kundendetail-API
Erstellen Sie einen neuen Ordner namens services im Ordner src . Erstellen Sie als Nächstes in diesem neu erstellten Ordner eine neue Datei namens login.service.ts und fügen Sie zwei Funktionen hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class LoginService { constructor(private http: HttpClient) { } login(data) { data = { email: 'admin', password: 'admin' }; return this.http.post('http://localhost:3070/api/login', data); } getCustomerDetails() { return this.http.get('http://localhost:3070/customers/details'); } } |
Schritt 6: Aufrufen des HTTP-Client-Services
Schließlich sind wir beim letzten Teil unseres Tutorials angelangt. Wir werden unseren HTTP-Service aus der app.component.ts-Datei aufrufen. Fügen Sie die zwei LoginService-Funktionen zu app.component.ts hinzu. Rufen Sie die Login-API mit onload und die customers/details mit onclick:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { LoginService } from './services/login.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angular-Interceptor'; constructor(public loginService: LoginService) { this.loginService.login({}).subscribe(data => { console.log(data); }); } getCustomerDetails() { this.loginService.getCustomerDetails().subscribe((data) => { console.log('----->>>', data); }); } } |
Jetzt müssen wir ein UI-Element in app.component.html einfügen, damit der Benutzer darauf klicken kann:
|
1 |
<h2 (click)="getCustomerDetails()">Kundendetails abrufen</h2> |
Zum Abschluss müssen Sie den LoginService zu den providers in AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Unten finden Sie einen Screenshot des Fehlerbehandlungs-Dialogs:
Fazit
In diesem Tutorial haben wir gelernt, wie man HTTP-Anfragen und -Antworten mit Angular-Interceptoren verarbeitet. Wir haben auch gelernt, wie man Fehler mithilfe eines Dialogs in Angular Material behandelt.
Angular-Apps verwenden Node.js als Laufzeitumgebung. Wenn Sie mehr über Node.js erfahren möchten und darüber, wie Sie Node.js-Anwendungen auf Docker bereitstellen, lesen Sie unseren How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04-Leitfaden. Sie können sich auch How To Perform Production Tasks On Ubuntu 20.04 With Node.js und Installing Node.js on CentOS 8: a Complete Guide.
ansehen. Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.