Interceptadores angulares são ferramentas muito poderosas que os desenvolvedores podem usar para gerenciar como seus aplicativos lidam com solicitações e respostas HTTP. Eles desempenham um papel crucial na implementação de recursos como registro, autenticação, tratamento de erros e muito mais, o que leva a um código mais claro e fácil de manter.

Angular Interceptors atuam como um middleware entre seu aplicativo Angular e o servidor. Eles interceptam solicitações antes de serem enviadas ao servidor e respostas antes de chegarem aos componentes do nosso aplicativo. Isso permite que os desenvolvedores modifiquem solicitações adicionando cabeçalhos, modificando corpos de solicitação/resposta e alterando códigos de status.

Configurando seu projeto Angular

Primeiro, certifique-se de ter o Angular CLI instalado. Caso contrário, você pode instalá-lo com npm:

npm install -g @angular/cli

Agora, crie um novo projeto Angular:

ng new Project_Name
cd Project_Name

Agora, gere um novo interceptor HTTP com Angular CLI:

ng generate interceptor interceptors/interceptorName

Isso criará dois arquivos: interceptorName.interceptor.ts e interceptorName.interceptor.spec.ts no diretório src/app/interceptors.

Agora, abra interceptorName.interceptor.ts e adicione a lógica para seu interceptor. Aqui está um exemplo que registra uma mensagem.

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Agora, para usar o interceptor, abra app.config.ts e adicione-o ao array de provedores:

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Casos de uso avançados de interceptores angulares

Transformação Personalizada de Solicitações e Respostas

Os interceptadores podem adaptar a transformação de dados para solicitações e respostas, como modificar corpos de solicitação, cabeçalhos ou formatos de dados de resposta antes de serem processados ​​pelo aplicativo.

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Zombando de cenários de teste

Os desenvolvedores podem simular diferentes situações de servidor sem depender de serviços de back-end ativos, usando interceptores para simular respostas HTTP durante os testes. Este método permite avaliar adequadamente vários cenários.

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Mecanismos de tratamento de erros e novas tentativas

Os Angular Interceptors aprimoram os aplicativos implementando estratégias de tratamento de erros, como repetir automaticamente solicitações com falha e transformar respostas de erro para melhorar a experiência do usuário.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

Aqui, o interceptor tenta novamente a solicitação com falha até três vezes antes de tratar o erro, garantindo várias tentativas para concluir a solicitação com êxito.

Encadeamento de interceptadores e controle de ordem de execução

No Angular, os desenvolvedores podem vincular vários interceptadores, cada um gerenciando diferentes aspectos do processamento de solicitações, como autenticação, registro ou tratamento de erros. Eles são executados na ordem em que são registrados, permitindo a modificação precisa de solicitações e respostas, garantindo gerenciamento flexível de fluxos de trabalho para funcionalidade aprimorada do aplicativo.

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Tratamento de eventos e interação DOM

Os interceptadores angulares têm a capacidade de interceptar eventos e interações DOM antes que o Angular os processe. Essa funcionalidade permite tarefas como registrar interações do usuário, aplicar políticas de manipulação de eventos em todo o aplicativo ou conduzir validações adicionais antes da propagação de eventos dentro do aplicativo.

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Interceptação usando ferramenta externa

Ferramentas externas de interceptação HTTP podem ser incrivelmente úteis em vários cenários, especialmente quando você precisa de mais controle sobre suas solicitações e respostas HTTP além do que está disponível em interceptadores integrados. Eles são particularmente benéficos para testar e depurar APIs, simulando diferentes condições de servidor e garantindo que seu aplicativo lide com vários casos extremos de maneira eficaz.

Requestly é uma ferramenta poderosa que aprimora seu fluxo de trabalho de desenvolvimento. Por exemplo, suponha que você esteja desenvolvendo um aplicativo e precise testar como ele lida com uma resposta lenta da rede.

• Instalação e configuração: Instale facilmente o Requestly como uma extensão do navegador e configure regras para interceptar e modificar solicitações e respostas HTTP.
• Gerenciamento de regras: defina e gerencie conjuntos de regras com base em URLs, cabeçalhos ou parâmetros de consulta para interceptar solicitações de acordo com critérios específicos.
• Modificação de solicitação: modifique solicitações adicionando cabeçalhos, reescrevendo URLs ou redirecionando solicitações com base em regras predefinidas, facilitando testes dinâmicos e cenários de depuração.
• Casos de uso avançados: Utilize Requestly para simular diferentes respostas do servidor, simular endpoints para fins de teste ou impor condições de rede específicas durante o desenvolvimento.

Conclusão

Interceptadores angulares são ferramentas indispensáveis ​​para gerenciar a comunicação HTTP e aumentar a robustez das aplicações Angular. Ao dominar os métodos e explorar soluções externas como Requestly, os desenvolvedores podem agilizar as integrações de API, melhorar as práticas de segurança e otimizar o desempenho de forma eficaz. Adote interceptores para elevar a confiabilidade e a escalabilidade de seus aplicativos Angular ao lidar com diversas interações de back-end com confiança e eficiência.