Angular Academy · Lezione

Interceptor funzionali

Intercettare le richieste con interceptor funzionali

Interceptor funzionali è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cos'è un interceptor

Un interceptor HTTP si trova tra la Sua app e la rete. Ogni richiesta e risposta passa attraverso di esso, così può aggiungere intestazioni, registrare eventi, trasformare dati, riprovare o gestire gli errori in un unico punto centralizzato.

HttpInterceptorFn

Angular moderno usa interceptor funzionali: un HttpInterceptorFn riceve la richiesta e un handler next, quindi restituisce un observable di eventi HTTP.

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

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

Registrare con withInterceptors

Fornisca gli interceptor tramite provideHttpClient(withInterceptors([...])) nella configurazione dell'app.

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

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

L'handler next

Chiami next(req) per passare la richiesta lungo la catena. Qualunque valore restituisca diventa il flusso della richiesta; se non chiama next, la richiesta non viene mai inviata.

Le richieste sono immutabili

HttpRequest è immutabile. Per modificarlo deve usare clone() con le modifiche desiderate e passare il clone a next.

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

Concatenare più interceptor

Gli interceptor vengono eseguiti nell'ordine indicato. Ognuno avvolge il successivo, quindi l'array forma una pipeline: il primo vede per primo la richiesta e per ultimo la risposta.

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

Usare inject() negli interceptor

Gli interceptor funzionali vengono eseguiti in un contesto di injection, quindi può usare inject() direttamente per ottenere i servizi.

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

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

Ispezionare la risposta

Si colleghi al flusso restituito per osservare le risposte, ad esempio per misurare i tempi o registrare eventi.

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'))
  );
};

Intercettazione condizionale

Può esaminare l'URL o il metodo della richiesta per applicare la logica solo quando necessario.

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);
};

Interceptor funzionali e basati su classi

Gli interceptor funzionali sostituiscono il precedente HttpInterceptor basato su classi. Sono più semplici, tree-shakable, facili da testare e vengono registrati senza token DI.

Interop con interceptor basati su DI

Se deve usare interceptor legacy basati su classi, withInterceptorsFromDi() consente di integrarli. Per il nuovo codice, preferisca quelli funzionali.

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

Verifica rapida

Verifichi la Sua comprensione degli interceptor funzionali.

Riepilogo: interceptor funzionali

Gli interceptor centralizzano la logica HTTP trasversale.

HttpInterceptorFn: (req, next) => Observable.
Registri con withInterceptors([...]).
Cloni le richieste per modificarle; chiami next per continuare.
Usi inject() per i servizi.

Prossimo argomento: aggiungere le intestazioni di autenticazione.

Domande Frequenti

La lezione «Interceptor funzionali» è gratuita?

Sì — il testo completo di «Interceptor funzionali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Interceptor funzionali»?

Intercettare le richieste con interceptor funzionali Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Interceptor funzionali»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy