📊 Capítulo 15: HttpClient & Functional Interceptors

Especialização em Frontend com Angular

🗺️ A Cadeia de Functional Interceptors do HttpClient

sequenceDiagram
    autonumber
    actor C as Componente / Service
    participant INT1 as authInterceptor (Injeta Bearer Token JWT)
    participant INT2 as loggingInterceptor (Mede tempo de resposta)
    participant API as Backend REST API

    C->>INT1: http.get('/api/v1/pedidos')
    INT1->>INT1: req.clone({ setHeaders: { Authorization: ... } })
    INT1->>INT2: next(reqModificada)
    INT2->>API: Dispara requisição HTTP
    API-->>INT2: HTTP 200 OK
    INT2->>INT2: Loga latência (ex: 45ms)
    INT2-->>C: Retorna resposta limpa e tipada

🎯 Slide 1: Configuração Funcional em app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor, loggingInterceptor]),
      withFetch() // Habilita o Fetch API nativo do navegador!
    ),
  ],
};

🎯 Slide 2: Escrevendo um Functional Interceptor

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).obterToken();
  if (!token) return next(req);

  const reqClonada = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }
  });
  return next(reqClonada);
};

🎯 Slide 3: Renovação Automática de Token

• Intercepta erros HTTP 401, pausa a requisição original, chama o endpoint de refresh token e retenta a requisição original com o novo token de forma transparente!