Angular Academy · Leçon

Intercepteurs fonctionnels

Interceptez les requêtes avec des intercepteurs fonctionnels

Intercepteurs fonctionnels est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Qu’est-ce qu’un intercepteur

Un intercepteur HTTP se place entre votre application et le réseau. Chaque requête et chaque réponse le traversent ; vous pouvez donc ajouter des en-têtes, enregistrer des informations, transformer, réessayer ou gérer les erreurs en un seul endroit centralisé.

HttpInterceptorFn

Les versions modernes d’Angular utilisent des intercepteurs fonctionnels : une HttpInterceptorFn reçoit la requête et un gestionnaire next, puis renvoie un observable d’événements HTTP.

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

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

Enregistrer avec withInterceptors

Fournissez les intercepteurs via provideHttpClient(withInterceptors([...])) dans la configuration de votre application.

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

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

Le gestionnaire suivant

Appelez next(req) pour transmettre la requête dans la chaîne. Tout ce que vous renvoyez devient le flux de la requête ; si vous n’appelez pas next, la requête n’est jamais envoyée.

Les requêtes sont immuables

HttpRequest est immuable. Pour le modifier, vous devez utiliser clone() avec vos changements, puis transmettre la copie à next.

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

Enchaîner plusieurs intercepteurs

Les intercepteurs s’exécutent dans l’ordre indiqué. Chacun encapsule le suivant, de sorte que le tableau forme un pipeline : le premier voit la requête en premier et la réponse en dernier.

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

Utiliser inject() dans les intercepteurs

Les intercepteurs fonctionnels s’exécutent dans un contexte d’injection ; vous pouvez donc appeler directement inject() pour obtenir des services.

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

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

Inspecter la réponse

Interceptez le flux renvoyé pour observer les réponses, par exemple afin de mesurer la durée ou d’effectuer une journalisation.

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

Interception conditionnelle

Vous pouvez appliquer une logique sélective en fonction de l’URL ou de la méthode de la requête.

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

Intercepteurs fonctionnels ou basés sur des classes

Les intercepteurs fonctionnels remplacent l’ancien HttpInterceptor basé sur une classe. Ils sont plus simples, optimisables par suppression du code inutilisé, faciles à tester et s’enregistrent sans jetons DI.

Interopérabilité des intercepteurs basés sur DI

Si vous devez utiliser des intercepteurs hérités basés sur des classes, withInterceptorsFromDi() les prend en charge. Préférez les intercepteurs fonctionnels pour tout nouveau code.

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

Vérification rapide

Vérifiez votre compréhension des intercepteurs fonctionnels.

Récapitulatif : intercepteurs fonctionnels

Les intercepteurs centralisent la logique HTTP transversale.

HttpInterceptorFn : (req, next) => Observable.
Enregistrez-les avec withInterceptors([...]).
Clonez les requêtes pour les modifier ; appelez next pour continuer.
Utilisez inject() pour les services.

Ensuite : ajouter des en-têtes d’authentification.

Questions Fréquemment Posées

La leçon « Intercepteurs fonctionnels » est-elle gratuite ?

Oui — le texte complet de « Intercepteurs fonctionnels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Intercepteurs fonctionnels » ?

Interceptez les requêtes avec des intercepteurs fonctionnels Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Intercepteurs fonctionnels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Intercepteurs fonctionnels
Ajouter des en-têtes d’authentification
Gérer les erreurs globalement
Nouvelles tentatives et indicateurs de chargement

← Retour à Angular Academy