Angular Academy · Aula

Interceptadores funcionais

Intercepte requisições com interceptadores funcionais.

Interceptadores funcionais é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que é um interceptor

Um interceptor HTTP fica entre seu aplicativo e a rede. Cada requisição e resposta passa por ele, permitindo adicionar cabeçalhos, registrar, transformar, repetir ou tratar erros em um único lugar centralizado.

HttpInterceptorFn

O Angular moderno usa interceptors funcionais: um HttpInterceptorFn recebe a requisição e um manipulador next, e retorna um observável de eventos HTTP.

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

Registrando com withInterceptors

Forneça interceptors por meio de provideHttpClient(withInterceptors([...])) na configuração do aplicativo.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

O manipulador next

Chame next(req) para passar a requisição adiante pela cadeia. O que você retornar se tornará o fluxo da requisição; se não chamar next, a requisição nunca será enviada.

As requisições são imutáveis

HttpRequest é imutável. Para alterá-la, você deve usar clone() com suas modificações e passar o clone para next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Encadeando vários interceptors

Os interceptors são executados na ordem listada. Cada um envolve o próximo, formando um pipeline: o primeiro vê a requisição primeiro e a resposta por último.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Usando inject() dentro dos interceptors

Os interceptors funcionais são executados em um contexto de injeção, portanto você pode usar inject() diretamente nos serviços.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Inspecionando a resposta

Observe o fluxo retornado, por exemplo, para medir o tempo ou fazer logging.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Intercepção condicional

Você pode ramificar com base na URL ou no método da requisição para aplicar a lógica seletivamente.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

Interceptors funcionais versus interceptors baseados em classes

Os interceptors funcionais substituem o HttpInterceptor mais antigo, baseado em classes. Eles são mais simples, podem ser removidos pelo tree-shaking, são fáceis de testar e são registrados sem tokens de DI.

Integração com interceptors baseados em DI

Se precisar usar interceptors legados baseados em classes, withInterceptorsFromDi() faz a integração com eles. Prefira os funcionais em códigos novos.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Verificação rápida

Teste sua compreensão sobre interceptors funcionais.

Recapitulação: interceptors funcionais

Os interceptors centralizam a lógica HTTP transversal.

HttpInterceptorFn: (req, next) => Observable.
Registre com withInterceptors([...]).
Use clones para modificar requisições; chame next para continuar.
Use inject() para obter serviços.

A seguir: adicionando cabeçalhos de autenticação.

Perguntas Frequentes

A aula “Interceptadores funcionais” é grátis?

Sim — o texto completo de “Interceptadores funcionais” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Interceptadores funcionais”?

Intercepte requisições com interceptadores funcionais. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Interceptadores funcionais”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Interceptadores funcionais
Adicionando cabeçalhos de autenticação
Tratamento global de erros
Novas tentativas e indicadores de carregamento

← Voltar para Angular Academy