Si has estado desarrollando una aplicación usando AngularJS, probablemente conozcas los interceptores HTTP. Sin embargo, estos interceptores HTTP no estuvieron disponibles en Angular hasta la versión 4.3. En este tutorial, utilizaremos interceptores en Angular para manejar peticiones y respuestas HTTP, y procesar errores.
Requisitos previos
Angular las aplicaciones utilizan el entorno de ejecución de Node.js. Para completar este tutorial, necesitarás tener Node.js instalado en tu máquina. Afortunadamente, Node.js es bastante fácil de instalar. Tenemos una guía completa sobre Cómo instalar Node.js en Ubuntu 18.04 aquí.
Además, te resultará beneficioso conocer Angular y estar familiarizado con el uso de Angular CLI para construir aplicaciones Angular. Utilizaremos Node v8.12.0 y npm v6.4.1.
Paso 1: Crear la aplicación Angular
Para empezar, vamos a crear una nueva aplicación Angular utilizando Angular CLI. Nombraremos a nuestra aplicación Angular-Interceptor. Ejecuta el siguiente comando para crear la aplicación:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Se te pedirán algunas opciones. Introduce los valores por defecto y continúa:
A continuación, navega al directorio de la aplicación y ejecuta el siguiente comando para iniciar la aplicación:
|
1 |
npx ng serve --open |
Luego, visualiza http://localhost:4200 en tu navegador para ver la aplicación. Ya has configurado una aplicación Angular básica.
Paso 2: Dar estilo a la aplicación Angular
Aquí daremos estilo a nuestra aplicación Angular utilizando Angular Material. Para instalar Angular Material en tu proyecto, ejecuta el siguiente comando:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Esto instalará @angular/material, @angular/cdk, y @angular/animation en tu proyecto. A continuación, configuraremos una animación en el proyecto. Añade BrowserAnimationsModule en tu archivo 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 { } |
Utilizaremos el componente Dialog de Angular Material. Para usar el componente Dialog, tenemos que importar MatDialogModule en el archivo 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 { } |
Para hacer la interfaz de usuario más atractiva, añadamos indigo-pink.css a tu archivo styles.scss :
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Paso 3: Construir tu interceptor de Angular
Bajo la carpeta app, crearemos una nueva carpeta llamada interceptor. Dentro de esta carpeta recién creada, crea un nuevo archivo httpconfig.interceptor.ts .
Necesitamos importar algunas dependencias en nuestro httpconfig.interceptor.ts para que nuestro interceptor funcione. Estas dependencias son HttpInterceptor, HttpRequest, HttpResponse, y HttpHandler, HttpEvent, HttpErrorResponse.
Nuestro archivo httpconfig.interceptor.ts se verá como a continuación después de la importación:
|
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'; |
A continuación, crea una clase HttpConfigInterceptor e implementa la interfaz HttpInterceptor. Este es un ejemplo:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Agregue el siguiente código al httpconfig.interceptor.ts archivo:
|
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; })); } } |
Para que funcione, necesitamos importar httpconfig.interceptor.ts en nuestro app.module.ts archivo:
|
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 ], ... }) |
Agregue HttpConfigInterceptor a providers. Estableceremos multi: true para manejar múltiples interceptores:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
In la siguiente sección, crearemos nuestro servicio para manejar errores.
Paso 4: Servicio para el manejo de errores
Aquí escribiremos el código para manejar errores. Necesitaremos capturar los errores y mostrarlos adecuadamente a los usuarios finales. En pocas palabras, a continuación se detallan los pasos que seguiremos:
- Cree una carpeta llamada error-dialog en la app carpeta.
- Cree un servicio para errores llamado errorDialogService en un archivo llamado errordialog.service.ts.
- Agregue el siguiente código en el 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('El diálogo se cerró'); 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> Razón: {{data.reason}} </p> <p> Estado: {{data.status}} </p> </div> </div> |
Para resumir, listemos los pasos a continuación:
- Comienza importando errordialog.service.
- Luego, agregaremos el constructor para errorDialogService.
- También agregaremos el código para manejar la respuesta de error usando catchError y throwError.
- Importa errordialog.service y errordialog.component en el AppModule.
Después de realizar los cambios, se modificarán dos archivos: app.module.ts y 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); })); } } |
Paso 5: Creación de servicios de muestra
En este paso crearemos dos servicios como muestra:
- API de inicio de sesión
- API de detalles del cliente
Cree una nueva carpeta llamada services en la carpeta src. A continuación, dentro de esta carpeta recién creada, cree un nuevo archivo llamado login.service.ts, y agregue dos funciones:
|
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'); } } |
Paso 6: Llamar al servicio de cliente HTTP
Finalmente, estamos en la última parte de nuestro tutorial. Llamaremos a nuestro servicio HTTP desde el archivo app.component.ts. Agregue las dos funciones de LoginService a app.component.ts. Llame a la API de inicio de sesión con onload y a la de customers/details con 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); }); } } |
Ahora tenemos que agregar un elemento de interfaz de usuario en app.component.html, para que el usuario pueda hacer clic en él:
|
1 |
<h2 (click)="getCustomerDetails()">Obtener detalles del cliente</h2> |
Para terminar, necesitará incluir el LoginService en providers de AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
A continuación, encontrará una captura de pantalla del cuadro de diálogo del manejador de errores:
Conclusión
En este tutorial, aprendimos a manejar peticiones y respuestas HTTP utilizando interceptores de Angular. También aprendimos a manejar errores utilizando un cuadro de diálogo en Angular Material.
Las aplicaciones de Angular utilizan Node.js como su entorno de ejecución. Si quiere aprender más sobre Node.js y cómo desplegar aplicaciones de Node.js en Docker, consulte nuestra Cómo desplegar una aplicación de Node.js (Express.js) con Docker en Ubuntu 20.04 guía. También puede consultar Cómo realizar tareas de producción en Ubuntu 20.04 con Node.js y Cómo instalar Node.js en CentOS 8: una guía completa.
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.