Ha már fejlesztett alkalmazást AngularJS használatával, valószínűleg ismeri a HTTP interceptorokat. Azonban ezek a HTTP interceptorok az Angularban csak a 4.3-as verziótól kezdve érhetők el. Ebben az útmutatóban interceptorokat fogunk használni az Angularban a HTTP-kérések és -válaszok kezelésére, valamint a hibák feldolgozására.
Előfeltételek
Angular alkalmazások a Node.js futtatókörnyezetet használják. Az útmutató elvégzéséhez telepítenie kell a Node.js-t a gépére. Szerencsére a Node.js telepítése meglehetősen egyszerű. Van egy teljes útmutatónk arról, Hogyan telepítsük a Node.js-t Ubuntu 18.04-re itt.
Emellett hasznos lesz, ha ismeri az Angulart, és jártas az Angular CLI használatában az Angular alkalmazások készítéséhez. Mi a Node v8.12.0 és az npm v6.4.1 verziókat fogjuk használni.
1. lépés: Angular alkalmazás létrehozása
Kezdésként hozzunk létre egy új Angular alkalmazást az Angular CLI segítségével. Az alkalmazásunk neve Angular-Interceptor lesz. Futtassa az alábbi parancsot az alkalmazás létrehozásához:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Néhány választási lehetőséget fog kapni. Adja meg az alapértelmezett értékeket, és lépjen tovább:
Ezután lépjen be az alkalmazás könyvtárába, és futtassa az alábbi parancsot az alkalmazás elindításához:
|
1 |
npx ng serve --open |
Ezután nyissa meg a http://localhost:4200 címet a böngészőjében az alkalmazás megtekintéséhez. Ezzel konfigurált egy alapvető Angular alkalmazást.
2. lépés: Az Angular alkalmazás stílusának kialakítása
Itt az Angular alkalmazásunkat az Angular Material segítségével fogjuk formázni. Az Angular Material projektbe történő telepítéséhez futtassa az alábbi parancsot:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Ez telepíteni fogja az @angular/material, @angular/cdk, és az @angular/animation csomagokat a projektjében. Ezután beállítunk egy animációt a projektben. Adja hozzá a BrowserAnimationsModule modult a src/app/module.ts fájlhoz:
|
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 { } |
Az Angular Material Dialog komponensét fogjuk használni. A Dialog komponens használatához importálnunk kell a MatDialogModule modult a src/app/app.module.ts fájlban:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Hogy a felület tetszetősebb legyen, adjuk hozzá az indigo-pink.css fájlt a styles.scss fájlhoz:
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
3. lépés: Az Angular Interceptor elkészítése
Az app mappában létrehozunk egy új mappát, melynek neve interceptor lesz. Ebben az újonnan létrehozott mappában hozzon létre egy új httpconfig.interceptor.ts fájlt.
Importálnunk kell néhány függőséget a httpconfig.interceptor.ts fájlba, hogy az interceptorunk működjön. Ezek a függőségek a következők: HttpInterceptor, HttpRequest, HttpResponse, valamint a HttpHandler, HttpEvent, HttpErrorResponse.
A httpconfig.interceptor.ts fájlunk az importálás után így fog kinézni:
|
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'; |
Ezután hozzon létre egy HttpConfigInterceptor osztályt, és implementálja a HttpInterceptor. Íme egy példa:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Add hozzá az alábbi kódot a(z) httpconfig.interceptor.ts fájlba:
|
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; })); } } |
Ahhoz, hogy működjön, importálnunk kell a(z) httpconfig.interceptor.ts fájlt az app.module.ts fájlunkba:
|
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 ], ... }) |
Add hozzá a(z) HttpConfigInterceptor elemet a providers tömbhöz. A multi: true értéket állítjuk be több interceptor kezeléséhez:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
A következő részben létrehozzuk a hibák kezelésére szolgáló szolgáltatásunkat.
4. lépés: Szolgáltatás a hibák kezelésére
Itt fogjuk megírni a hibák kezelésére szolgáló kódot. El kell fognunk a hibákat, és megfelelően meg kell jelenítenünk azokat a végfelhasználóknak. Dióhéjban az alábbi lépéseket fogjuk követni:
- Hozz létre egy error-dialog nevű mappát az app mappában.
- Hozz létre egy hibakezelő szolgáltatást errorDialogService néven a következő fájlban: errordialog.service.ts.
- Add hozzá az alábbi kódot az 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('A párbeszédablak bezárult'); 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> Ok: {{data.reason}} </p> <p> Státusz: {{data.status}} </p> </div> </div> |
Összefoglalásként tekintsük át az alábbi lépéseket:
- Kezdésként importálja a következőt: errordialog.service.
- Ezután hozzáadjuk a konstruktort a következőhöz: errorDialogService.
- Hozzáadjuk a hibaválasz kezelésére szolgáló kódot is a következő használatával: catchError és throwError.
- Importálja a következőt: errordialog.service és a errordialog.component a következőbe: AppModule.
A változtatások elvégzése után két fájl fog módosulni: app.module.ts és a 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); })); } } |
5. lépés: Minta szolgáltatások létrehozása
Ebben a lépésben két szolgáltatást fogunk létrehozni mintaként:
- Login API
- Ügyfélrészletek API
Hozzon létre egy új mappát, amelynek neve services a src mappában. Ezután ebben az újonnan létrehozott mappában hozzon létre egy új fájlt, amelynek neve login.service.ts, és adjon hozzá két függvényt:
|
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'); } } |
6. lépés: A HTTP-kliens szolgáltatás meghívása
Végül elérkeztünk az útmutatónk utolsó részéhez. A HTTP-szolgáltatásunkat a app.component.ts fájlból fogjuk meghívni. Adja hozzá a két LoginService függvényt az app.component.ts fájlhoz. Hívja meg a login API-t az onload eseménnyel, a customers/details-t pedig az 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); }); } } |
Now we have to add a UI element in app.component.html, so that the user can click it:
|
1 |
<h2 (click)="getCustomerDetails()">Ügyféladatok lekérése</h2> |
To finish, you will need to include the LoginService to providers in AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Below, find a screenshot of the error handler dialog:
Conclusion
In this tutorial, we learned how to handle HTTP requests and responses using Angular interceptors. We also learned how to handle errors using dialog in Angular Material.
Angular apps use Node.js as their runtime. If you want to learn more about Node.js and how to deploy Node.js applications on Docker, check out our Hogyan telepítsünk Node.js (Express.js) alkalmazást Dockerrel Ubuntu 20.04-en című útmutatónkat. Emellett megtekintheti a Hogyan végezzünk éles környezeti feladatokat Ubuntu 20.04-en Node.js-szel és a A Node.js telepítése CentOS 8-ra: Teljes útmutató.
Sikeres fejlesztést!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.