Angular Academy · Leçon

Nouvelles tentatives et indicateurs de chargement

Implémentez les nouvelles tentatives et les indicateurs de chargement globaux

Leçon 4 sur 413 étapes

Nouvelles tentatives et indicateurs de chargement est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Deux préoccupations transversales

Les intercepteurs sont parfaits pour deux comportements applicables à toute l’application : réessayer automatiquement les requêtes échouées et suivre un état de chargement global lorsqu’une requête est en cours.

Réessayer avec retry

Faites passer le flux dans retry après next(req) pour retenter les échecs temporaires.

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

Réessayer uniquement les requêtes sûres

Réessayez librement les méthodes idempotentes (GET, HEAD) ; soyez prudent avec POST/PUT, qui peuvent créer des doublons. Contrôlez la méthode.

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

Réessayer avec délai et temporisation progressive

Ajoutez un délai afin que les nouvelles tentatives ne surchargent pas le serveur, avec une temporisation exponentielle pour améliorer la résilience.

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

Nouvelle tentative conditionnelle

Réessayez uniquement en cas d’erreurs pouvant faire l’objet d’une nouvelle tentative (5xx, réseau), et non pour les erreurs client 4xx, qui échoueront à nouveau.

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

État de chargement global

Un service de chargement suit le nombre de requêtes actives afin que l’interface puisse afficher un indicateur de chargement global.

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

Intercepteur de chargement

Incrémentez le compteur au début de la requête et décrémentez-le lors de finalize (en cas de succès ou d’erreur) en utilisant finalize.

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

Pourquoi utiliser finalize

finalize s’exécute à la fin, en cas d’erreur, OR lors d’une désinscription, ce qui garantit que le compteur de chargement est toujours décrémenté — aucun indicateur ne reste bloqué, même si la requête échoue ou est annulée.

Afficher l’indicateur de chargement

Liez le signal de chargement dans votre modèle racine.

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

Exclure les requêtes en arrière-plan

Certaines requêtes d’interrogation périodique ou de prélecture ne doivent pas déclencher l’indicateur de chargement. Utilisez un en-tête personnalisé ou un jeton de contexte pour les ignorer.

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

Combiner les nouvelles tentatives et le chargement

Ordonnez-les de façon à ce que les nouvelles tentatives se produisent dans une seule période de chargement : démarrez le chargement, effectuez les nouvelles tentatives en interne, puis finalisez une seule fois. Placez le chargement à l’extérieur afin qu’il couvre toutes les tentatives.

Vérification rapide

Testez votre compréhension des nouvelles tentatives et des indicateurs de chargement.

Réponds-y dans la leçon interactive

Récapitulatif : indicateurs de nouvelle tentative et de chargement

Les intercepteurs gèrent proprement les nouvelles tentatives et le chargement global.

retry avec un délai et une temporisation progressive ; limitez son utilisation aux cas idempotents ou pouvant faire l’objet d’une nouvelle tentative.
Suivez les requêtes actives dans un service ; utilisez finalize pour décrémenter le compteur.
Utilisez des jetons de contexte pour ignorer les requêtes en arrière-plan.

Vous avez terminé la section consacrée aux intercepteurs de HttpClient.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 38
Leçons: 144

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Nouvelles tentatives et indicateurs de chargement » est-elle gratuite ?

Oui — le texte complet de « Nouvelles tentatives et indicateurs de chargement » 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 « Nouvelles tentatives et indicateurs de chargement » ?

Implémentez les nouvelles tentatives et les indicateurs de chargement globaux 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 4 sur 4.

Combien de temps prend la leçon « Nouvelles tentatives et indicateurs de chargement » ?

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