Se você tem desenvolvido uma aplicação usando AngularJS, você provavelmente conhece os interceptadores HTTP. No entanto, esses interceptadores HTTP não estavam disponíveis no Angular até a versão 4.3. Neste tutorial, usaremos interceptadores no Angular para lidar com requisições e respostas HTTP, e processar erros.
Pré-requisitos
Angular as aplicações usam o Node.js runtime. Para concluir este tutorial, você precisará ter o Node.js instalado em sua máquina. Felizmente, o Node.js é bastante fácil de instalar. Temos um guia completo sobre Como Instalar o Node.js no Ubuntu 18.04 aqui.
Além disso, será benéfico para você conhecer o Angular e estar familiarizado com o uso do Angular CLI para construir aplicações Angular. Usaremos o Node v8.12.0 e o npm v6.4.1.
Passo 1: Criar App Angular
Para começar, vamos criar um novo app Angular usando o Angular CLI. Nomearemos nossa aplicação Angular-Interceptor. Execute o comando abaixo para criar o app:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Você será questionado sobre algumas escolhas. Insira os valores padrão e prossiga:
Em seguida, navegue até o diretório da aplicação e execute o comando abaixo para iniciar a aplicação:
|
1 |
npx ng serve --open |
Em seguida, acesse http://localhost:4200 no seu navegador para ver o app. Você agora configurou um app Angular básico.
Passo 2: Estilizar o App Angular
Aqui vamos estilizar nosso app Angular usando o Angular Material. Para instalar o Angular Material no seu projeto, execute o comando abaixo:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Isso instalará o @angular/material, @angular/cdk, e o @angular/animation no seu projeto. Em seguida, vamos configurar uma animação no projeto. Adicione o BrowserAnimationsModule no seu arquivo 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 { } |
Usaremos o componente Dialog do Angular Material. Para usar o componente Dialog, temos que importar o MatDialogModule no arquivo 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 tornar a interface do usuário mais atraente, vamos adicionar o indigo-pink.css ao seu arquivo styles.scss :
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Passo 3: Construir Seu Interceptador Angular
Sob a pasta app, criaremos uma nova pasta chamada interceptor. Dentro desta pasta recém-criada, crie um novo arquivo httpconfig.interceptor.ts .
Precisamos importar algumas dependências em nosso arquivo httpconfig.interceptor.ts para fazer nosso interceptador funcionar. Essas dependências são HttpInterceptor, HttpRequest, HttpResponse, e HttpHandler, HttpEvent, HttpErrorResponse.
Nosso arquivo httpconfig.interceptor.ts ficará como abaixo após a importação:
|
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'; |
Em seguida, crie uma classe HttpConfigInterceptor e implemente a interface HttpInterceptor. Este é um exemplo:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Adicione o código abaixo ao httpconfig.interceptor.ts arquivo:
|
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 fazê-lo funcionar, precisamos importar httpconfig.interceptor.ts em nosso app.module.ts arquivo:
|
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 ], ... }) |
Adicione HttpConfigInterceptor a providers. Definiremos multi: true para lidar com múltiplos interceptores:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
Na próxima seção, criaremos nosso serviço para lidar com erros.
Passo 4: Serviço para Tratamento de Erros
Aqui escreveremos o código para lidar com erros. Precisaremos capturar os erros e exibi-los adequadamente para os usuários finais. Em resumo, abaixo estão as etapas que seguiremos:
- Crie uma pasta chamada error-dialog na pasta app .
- Crie um serviço para erros chamado errorDialogService em um arquivo chamado errordialog.service.ts.
- Adicione o código abaixo no 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('O diálogo foi fechado'); 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> Motivo: {{data.reason}} </p> <p> Status: {{data.status}} </p> </div> </div> |
Para resumir, vamos listar as etapas abaixo:
- Comece importando o errordialog.service.
- Em seguida, adicionaremos o construtor para errorDialogService.
- Também adicionaremos o código para lidar com a resposta de erro usando catchError e throwError.
- Importe o errordialog.service e o errordialog.component no AppModule.
Depois de fazermos as alterações, dois arquivos serão modificados: app.module.ts e 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); })); } } |
Passo 5: Criando Serviços de Exemplo
Neste passo, criaremos dois serviços como exemplo:
- API de Login
- API de Detalhes do Cliente
Crie uma nova pasta chamada services na src pasta. Em seguida, dentro desta pasta recém-criada, crie um novo arquivo chamado login.service.ts, e adicione duas funções:
|
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'); } } |
Passo 6: Chamando o Serviço de Cliente HTTP
Finalmente, estamos na última parte do nosso tutorial. Devemos chamar nosso serviço HTTP a partir do arquivo app.component.ts . Adicione as duas funções do LoginService ao arquivo app.component.ts. Chame a API de login no onload e a customers/details com 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); }); } } |
Agora temos que adicionar um elemento de UI em app.component.html, para que o usuário possa clicar nele:
|
1 |
<h2 (click)="getCustomerDetails()">Obter detalhes do cliente</h2> |
Para finalizar, você precisará incluir o LoginService em providers no AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Abaixo, veja uma captura de tela da caixa de diálogo do manipulador de erros:
Conclusão
Neste tutorial, aprendemos como lidar com requisições e respostas HTTP usando interceptores do Angular. Também aprendemos como lidar com erros usando caixas de diálogo no Angular Material.
Os aplicativos Angular usam o Node.js como seu ambiente de execução. Se você quiser aprender mais sobre o Node.js e como implantar aplicações Node.js no Docker, confira o nosso Como implantar um aplicativo Node.js (Express.js) com Docker no Ubuntu 20.04 guia. Você também pode conferir Como executar tarefas de produção no Ubuntu 20.04 com Node.js e Instalando o Node.js no CentOS 8: um guia completo.
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.