Als u een applicatie heeft ontwikkeld met AngularJS, bent u waarschijnlijk op de hoogte van HTTP-interceptors. Deze HTTP-interceptors waren echter pas vanaf versie 4.3 beschikbaar in Angular. In deze handleiding gaan we interceptors in Angular gebruiken om HTTP-verzoeken en -antwoorden af te handelen en fouten te verwerken.
Vereisten
Angular-applicaties maken gebruik van Node.js runtime. Om deze handleiding te voltooien, moet Node.js op uw machine zijn geïnstalleerd. Gelukkig is Node.js vrij eenvoudig te installeren. We hebben hier een complete gids over Hoe u Node.js installeert op Ubuntu 18.04.
Daarnaast is het handig als u Angular kent en vertrouwd bent met het gebruik van Angular CLI om Angular-applicaties te bouwen. We gebruiken Node v8.12.0 en npm v6.4.1.
Stap 1: Angular-app maken
Laten we om te beginnen een nieuwe Angular-app maken met behulp van Angular CLI. We noemen onze applicatie Angular-Interceptor. Voer het onderstaande commando uit om de app te maken:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Er zal u om een aantal keuzes worden gevraagd. Voer de standaardwaarden in en ga verder:
Navigeer vervolgens naar de applicatiemap en voer het onderstaande commando uit om de applicatie te starten:
|
1 |
npx ng serve --open |
Bekijk vervolgens http://localhost:4200 in uw browser om de app te bekijken. U heeft nu een basis Angular-app geconfigureerd.
Stap 2: Angular-app stylen
Hier gaan we onze Angular-app stylen met behulp van Angular Material. Voer het onderstaande commando uit om Angular Material in uw project te installeren:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Dit installeert @angular/material, @angular/cdk, en @angular/animation in uw project. Vervolgens stellen we een animatie in het project in. Voeg BrowserAnimationsModule toe aan uw src/app/module.ts -bestand:
|
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 { } |
We gaan de Dialog-component van Angular Material gebruiken. Om de Dialog-component te gebruiken, moeten we MatDialogModule importeren in het src/app/app.module.ts -bestand:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Om de UI aantrekkelijker te maken, voegen we indigo-pink.css toe aan uw styles.scss -bestand:
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Stap 3: Bouw uw Angular Interceptor
Onder de map app maken we een nieuwe map genaamd interceptor. Maak in deze nieuw gemaakte map een nieuw httpconfig.interceptor.ts -bestand aan.
We moeten enkele afhankelijkheden importeren in ons httpconfig.interceptor.ts-bestand om onze interceptor te laten werken. Deze afhankelijkheden zijn HttpInterceptor, HttpRequest, HttpResponse, en HttpHandler, HttpEvent, HttpErrorResponse.
Ons httpconfig.interceptor.ts-bestand zal er na het importeren als volgt uitzien:
|
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'; |
Maak vervolgens een klasse HttpConfigInterceptor en implementeer de interface HttpInterceptor. Dit is een voorbeeld:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Voeg de onderstaande code toe aan het httpconfig.interceptor.ts bestand:
|
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; })); } } |
Om het te laten werken, moeten we httpconfig.interceptor.ts importeren in ons app.module.ts bestand:
|
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 ], ... }) |
Voeg HttpConfigInterceptor toe aan providers. We stellen multi: true in om meerdere interceptors af te handelen:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
In de volgende sectie zullen we onze service maken om fouten af te handelen.
Step 4: Service for Handling Errors
Hier gaan we code schrijven om fouten af te handelen. We moeten de fouten opvangen en deze op de juiste manier aan de eindgebruikers tonen. In een notendop zijn dit de stappen die we gaan volgen:
- Maak een map genaamd error-dialog in de app map.
- Maak een service voor fouten genaamd errorDialogService in een bestand genaamd errordialog.service.ts.
- Voeg de onderstaande code toe aan het 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('De dialoog is gesloten'); 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> Reden: {{data.reason}} </p> <p> Status: {{data.status}} </p> </div> </div> |
Kort samengevat zijn dit de stappen:
- Begin met het importeren van errordialog.service.
- Vervolgens voegen we de constructor toe voor errorDialogService.
- We voegen ook de code toe om de foutrespons af te handelen met behulp van catchError en throwError.
- Importeer errordialog.service en errordialog.component in de AppModule.
Nadat we de wijzigingen hebben aangebracht, zullen er twee bestanden zijn gewijzigd: app.module.ts en 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); })); } } |
Stap 5: Voorbeelddiensten maken
In deze stap maken we twee services als voorbeeld:
- Login-API
- Klantendetail-API
Maak een nieuwe map genaamd services in de src map. Maak vervolgens in deze nieuw gemaakte map een nieuw bestand genaamd login.service.ts, en voeg twee functies toe:
|
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'); } } |
Stap 6: De HTTP Client Service aanroepen
Tot slot zijn we bij het laatste deel van onze handleiding. We zullen onze HTTP-service aanroepen vanuit het app.component.ts bestand. Voeg de twee LoginService functies toe aan app.component.ts. Roep de login-API aan bij onload en de customers/details met 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); }); } } |
Nu moeten we een UI-element toevoegen in app.component.html, zodat de gebruiker erop kan klikken:
|
1 |
<h2 (click)="getCustomerDetails()">Klantgegevens ophalen</h2> |
Om te voltooien, moet u de LoginService toevoegen aan providers in AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Hieronder vindt u een screenshot van het dialoogvenster voor foutafhandeling:
Conclusie
In deze handleiding hebben we geleerd hoe we HTTP-verzoeken en -antwoorden kunnen afhandelen met behulp van Angular-interceptors. We hebben ook geleerd hoe we fouten kunnen afhandelen met behulp van een dialoogvenster in Angular Material.
Angular-apps gebruiken Node.js als hun runtime. Als u meer wilt weten over Node.js en hoe u Node.js-applicaties op Docker implementeert, bekijk dan onze How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04-handleiding. U kunt ook How To Perform Production Tasks On Ubuntu 20.04 With Node.js en Installing Node.js on CentOS 8: a Complete Guide.
Veel computerplezier!
Reacties
Nog geen reacties. Wees de eerste.