Αν αναπτύσσετε μια εφαρμογή χρησιμοποιώντας AngularJS, πιθανώς γνωρίζετε τους HTTP interceptors. Ωστόσο, αυτοί οι HTTP interceptors δεν ήταν διαθέσιμοι στο Angular μέχρι την έκδοση 4.3. Σε αυτόν τον οδηγό, θα χρησιμοποιήσουμε interceptors στο Angular για να χειριστούμε αιτήματα και απαντήσεις HTTP, καθώς και να επεξεργαστούμε σφάλματα.
Προαπαιτούμενα
Angular οι εφαρμογές χρησιμοποιούν το Node.js περιβάλλον εκτέλεσης. Για να ολοκληρώσετε αυτόν τον οδηγό, θα πρέπει να έχετε εγκατεστημένο το Node.js στον υπολογιστή σας. Ευτυχώς, το Node.js είναι αρκετά εύκολο στην εγκατάσταση. Έχουμε έναν πλήρη οδηγό για το Πώς να εγκαταστήσετε το Node.js σε Ubuntu 18.04 εδώ.
Επιπλέον, θα είναι χρήσιμο να γνωρίζετε Angular και να είστε εξοικειωμένοι με τη χρήση του Angular CLI για τη δημιουργία εφαρμογών Angular. Θα χρησιμοποιήσουμε το Node v8.12.0 και το npm v6.4.1.
Βήμα 1: Δημιουργία εφαρμογής Angular
Για αρχή, ας δημιουργήσουμε μια νέα εφαρμογή Angular χρησιμοποιώντας το Angular CLI. Θα ονομάσουμε την εφαρμογή μας Angular-Interceptor. Εκτελέστε την παρακάτω εντολή για να δημιουργήσετε την εφαρμογή:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Θα σας ζητηθούν κάποιες επιλογές. Εισαγάγετε τις προεπιλεγμένες τιμές και προχωρήστε:
Στη συνέχεια, μεταβείτε στον κατάλογο της εφαρμογής και εκτελέστε την παρακάτω εντολή για να εκκινήσετε την εφαρμογή:
|
1 |
npx ng serve --open |
Στη συνέχεια, δείτε το http://localhost:4200 στο πρόγραμμα περιήγησής σας για να δείτε την εφαρμογή. Έχετε πλέον ρυθμίσει μια βασική εφαρμογή Angular.
Βήμα 2: Μορφοποίηση της εφαρμογής Angular
Εδώ θα μορφοποιήσουμε την εφαρμογή Angular χρησιμοποιώντας το Angular Material. Για να εγκαταστήσετε το Angular Material στο έργο σας, εκτελέστε την παρακάτω εντολή:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Αυτό θα εγκαταστήσει τα @angular/material, @angular/cdk, και @angular/animation στο έργο σας. Στη συνέχεια, θα ρυθμίσουμε ένα animation στο έργο. Προσθέστε το BrowserAnimationsModule στο αρχείο σας src/app/module.ts :
|
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 { } |
Θα χρησιμοποιήσουμε το Dialog component από το Angular Material. Για να χρησιμοποιήσουμε το Dialog component, πρέπει να εισαγάγουμε το MatDialogModule στο αρχείο src/app/app.module.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Για να κάνουμε το UI πιο ελκυστικό, ας προσθέσουμε το indigo-pink.css στο αρχείο σας styles.scss :
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Step 3: Build Your Angular Interceptor
Κάτω από τον φάκελο app, θα δημιουργήσουμε έναν νέο φάκελο με το όνομα interceptor. Μέσα σε αυτόν τον νεοσύστατο φάκελο, δημιουργήστε ένα νέο αρχείο httpconfig.interceptor.ts .
Πρέπει να εισαγάγουμε ορισμένες εξαρτήσεις στο httpconfig.interceptor.ts για να λειτουργήσει ο interceptor μας. Αυτές οι εξαρτήσεις είναι οι HttpInterceptor, HttpRequest, HttpResponse, και οι HttpHandler, HttpEvent, HttpErrorResponse.
Το αρχείο μας httpconfig.interceptor.ts θα μοιάζει με το παρακάτω μετά την εισαγωγή:
|
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'; |
Στη συνέχεια, δημιουργήστε μια κλάση HttpConfigInterceptor και υλοποιήστε τη διεπαφή HttpInterceptor. Αυτό είναι ένα παράδειγμα:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Προσθέστε τον παρακάτω κώδικα στο httpconfig.interceptor.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 |
... @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; })); } } |
Για να λειτουργήσει, πρέπει να εισαγάγουμε το httpconfig.interceptor.ts στο app.module.ts αρχείο:
|
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 ], ... }) |
Προσθέστε το HttpConfigInterceptor στο providers. Θα ορίσουμε το multi: true για να χειριστούμε πολλαπλούς interceptors:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
In the next section, we shall create our service to handle errors.
Βήμα 4: Υπηρεσία για τη Διαχείριση Σφαλμάτων
Εδώ θα γράψουμε κώδικα για τη διαχείριση σφαλμάτων. Θα πρέπει να καταγράψουμε τα σφάλματα και να τα εμφανίσουμε κατάλληλα στους τελικούς χρήστες. Με λίγα λόγια, παρακάτω είναι τα βήματα που θα ακολουθήσουμε:
- Δημιουργήστε έναν φάκελο με όνομα error-dialog στον app φάκελο.
- Δημιουργήστε μια υπηρεσία για σφάλματα με όνομα errorDialogService σε ένα αρχείο με όνομα errordialog.service.ts.
- Προσθέστε τον παρακάτω κώδικα στο 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('Το παράθυρο διαλόγου έκλεισε'); 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> Αιτία: {{data.reason}} </p> <p> Κατάσταση: {{data.status}} </p> </div> </div> |
Συνοψίζοντας, ας δούμε τα παρακάτω βήματα:
- Ξεκινήστε εισάγοντας το errordialog.service.
- Στη συνέχεια, θα προσθέσουμε τον constructor για το errorDialogService.
- Θα προσθέσουμε επίσης τον κώδικα για τη διαχείριση της απόκρισης σφάλματος χρησιμοποιώντας catchError και throwError.
- Εισαγάγετε το errordialog.service και το errordialog.component στο AppModule.
Αφού κάνουμε τις αλλαγές, δύο αρχεία θα τροποποιηθούν: app.module.ts και το 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: Δημιουργία Δειγματικών Υπηρεσιών
Σε αυτό το βήμα θα δημιουργήσουμε δύο υπηρεσίες ως δείγμα:
- Login API
- Customer Detail API
Δημιουργήστε έναν νέο φάκελο με όνομα services στον φάκελο src . Στη συνέχεια, μέσα σε αυτόν τον νεοδημιουργηθέντα φάκελο, δημιουργήστε ένα νέο αρχείο με όνομα login.service.ts, και προσθέστε δύο συναρτήσεις:
|
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: Κλήση της Υπηρεσίας HTTP Client
Τέλος, βρισκόμαστε στο τελευταίο μέρος του οδηγού μας. Θα καλέσουμε την υπηρεσία HTTP από το αρχείο app.component.ts . Προσθέστε τις δύο LoginService συναρτήσεις στο app.component.ts. Καλέστε το login API κατά το onload και το customers/details με 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); }); } } |
Τώρα πρέπει να προσθέσουμε ένα στοιχείο UI στο app.component.html, έτσι ώστε ο χρήστης να μπορεί να κάνει κλικ σε αυτό:
|
1 |
<h2 (click)="getCustomerDetails()">Λήψη στοιχείων πελάτη</h2> |
Για να τελειώσετε, θα πρέπει να συμπεριλάβετε το LoginService στο providers στο AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Παρακάτω, δείτε ένα στιγμιότυπο οθόνης του παραθύρου διαλόγου διαχείρισης σφαλμάτων:
Συμπέρασμα
Σε αυτόν τον οδηγό, μάθαμε πώς να χειριζόμαστε αιτήματα και απαντήσεις HTTP χρησιμοποιώντας Angular interceptors. Μάθαμε επίσης πώς να χειριζόμαστε σφάλματα χρησιμοποιώντας παράθυρα διαλόγου στο Angular Material.
Οι εφαρμογές Angular χρησιμοποιούν το Node.js ως περιβάλλον εκτέλεσης. Αν θέλετε να μάθετε περισσότερα για το Node.js και πώς να αναπτύξετε εφαρμογές Node.js στο Docker, δείτε τον οδηγό μας Πώς να αναπτύξετε μια εφαρμογή Node.js (Express.js) με Docker στο Ubuntu 20.04 οδηγό. Μπορείτε επίσης να δείτε το Πώς να εκτελέσετε εργασίες παραγωγής στο Ubuntu 20.04 με το Node.js και το Εγκατάσταση του Node.js στο CentOS 8: Ένας πλήρης οδηγός.
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.