HttpClient

// app.config.ts
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import type { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { authInterceptor } from './http/auth.interceptor';
import { journalInterceptor } from './http/journal.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // Sans cet appel, HttpClient s'injecte quand meme depuis Angular 21, avec
    // la protection XSRF, et avec fetch depuis Angular 22. provideHttpClient
    // sert a changer ce reglage : ici, deux intercepteurs, dans cet ordre.
    provideHttpClient(withInterceptors([journalInterceptor, authInterceptor])),
  ],
};

// catalogue.ts
import { HttpClient, type HttpResponse } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { map, type Observable } from 'rxjs';

export interface Produit {
  readonly reference: string;
  readonly libelle: string;
  readonly prix: number;
}

export interface Page<T> {
  readonly elements: readonly T[];
  readonly total: number;
}

@Injectable({ providedIn: 'root' })
export class Catalogue {
  private readonly http = inject(HttpClient);

  // Le parametre de type est une promesse faite au compilateur, pas une
  // verification : rien ne controle que le JSON recu a cette forme.
  produit(reference: string): Observable<Produit> {
    return this.http.get<Produit>(`/api/produits/${encodeURIComponent(reference)}`);
  }

  // La forme objet de params convertit nombres et booleens ; un tableau repete
  // la cle. Les valeurs sont encodees, jamais a concatener dans l'URL.
  rechercher(terme: string, page: number, marques: readonly string[]): Observable<Produit[]> {
    return this.http.get<Produit[]>('/api/produits', {
      params: { q: terme, page, marque: marques },
      headers: { 'Accept-Language': 'fr-FR' },
    });
  }
  // rechercher('clavier sans fil', 2, ['logi', 'cherry']) envoie :
  // GET /api/produits?q=clavier%20sans%20fil&page=2&marque=logi&marque=cherry

  // observe: 'response' rend la reponse entiere, statut et en-tetes compris,
  // au lieu du seul corps.
  page(numero: number): Observable<Page<Produit>> {
    return this.http
      .get<Produit[]>('/api/produits', { params: { page: numero }, observe: 'response' })
      .pipe(
        map((reponse: HttpResponse<Produit[]>) => ({
          elements: reponse.body ?? [],
          total: Number(reponse.headers.get('X-Total-Count') ?? 0),
        })),
      );
  }

  // responseType change ce qui est lu : du texte brut, et le type rendu est
  // Observable<string>. Il n'accepte pas de parametre de type.
  exporterCsv(): Observable<string> {
    return this.http.get('/api/produits/export', { responseType: 'text' });
  }

  // Le corps est serialise en JSON, avec Content-Type: application/json.
  creer(produit: Produit): Observable<Produit> {
    return this.http.post<Produit>('/api/produits', produit);
  }
}

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import type { Observable } from 'rxjs';
import type { Produit } from './catalogue';

@Injectable({ providedIn: 'root' })
export class RechercheAvancee {
  private readonly http = inject(HttpClient);

  rechercher(terme: string, marque?: string): Observable<Produit[]> {
    const params = new HttpParams().set('q', terme);
    if (marque !== undefined) {
      // set ne modifie pas params : il rend un nouvel HttpParams, aussitot perdu.
      params.set('marque', marque);
    }
    return this.http.get<Produit[]>('/api/produits', { params });
  }
}

// rechercher('clavier', 'logi') envoie GET /api/produits?q=clavier
// Le filtre sur la marque a disparu, sans erreur ni avertissement.

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import type { Observable } from 'rxjs';
import type { Produit } from './catalogue';

@Injectable({ providedIn: 'root' })
export class RechercheAvancee {
  private readonly http = inject(HttpClient);

  rechercher(terme: string, marque?: string): Observable<Produit[]> {
    let params = new HttpParams().set('q', terme);
    if (marque !== undefined) {
      params = params.set('marque', marque); // on garde la copie rendue
    }
    return this.http.get<Produit[]>('/api/produits', { params });
  }
}

// rechercher('clavier', 'logi') envoie GET /api/produits?q=clavier&marque=logi

import { HttpEventType, type HttpInterceptorFn } from '@angular/common/http';
import { tap } from 'rxjs';

function trace(nom: string): HttpInterceptorFn {
  return (req, next) => {
    console.log(`${nom} : aller`);
    return next(req).pipe(
      tap((evenement) => {
        if (evenement.type === HttpEventType.Response) {
          console.log(`${nom} : retour`);
        }
      }),
    );
  };
}

export const premier = trace('premier');
export const second = trace('second');

// provideHttpClient(withInterceptors([premier, second])), puis une requete :
// premier : aller
// second : aller        <- puis le backend envoie la requete
// second : retour
// premier : retour

// http/journal.interceptor.ts
import { HttpEventType, type HttpInterceptorFn } from '@angular/common/http';
import { tap } from 'rxjs';

export const journalInterceptor: HttpInterceptorFn = (req, next) => {
  const debut = performance.now();
  // Avant next : la requete, a l'aller. Dans le pipe : la reponse, au retour.
  return next(req).pipe(
    tap({
      next: (evenement) => {
        if (evenement.type === HttpEventType.Response) {
          const duree = Math.round(performance.now() - debut);
          console.log(`${req.method} ${req.urlWithParams} ${evenement.status} en ${duree} ms`);
        }
      },
      error: () => console.log(`${req.method} ${req.urlWithParams} en echec`),
    }),
  );
};

// http/session.ts
import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class Session {
  // null tant que personne n'est connecte.
  readonly jeton = signal<string | null>(null);
}

// http/contexte.ts
import { HttpContextToken } from '@angular/common/http';

// La fabrique donne la valeur des requetes qui ne disent rien : l'intercepteur
// s'applique par defaut, et une requete s'en dispense en le disant.
export const SANS_AUTHENTIFICATION = new HttpContextToken<boolean>(() => false);

// http/auth.interceptor.ts
import type { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { SANS_AUTHENTIFICATION } from './contexte';
import { Session } from './session';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  // Le corps de l'intercepteur s'execute dans un contexte d'injection.
  const jeton = inject(Session).jeton();

  // Le jeton ne part que vers notre API : une URL absolue vers un tiers
  // (une carte, un CDN) ne doit jamais le recevoir.
  const versNotreApi = req.url.startsWith('/api/');

  if (jeton === null || !versNotreApi || req.context.get(SANS_AUTHENTIFICATION)) {
    return next(req);
  }

  // HttpRequest est immuable : clone rend une copie, avec l'en-tete en plus.
  return next(req.clone({ setHeaders: { Authorization: `Bearer ${jeton}` } }));
};

// connexion.ts
import { HttpClient, HttpContext } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { tap, type Observable } from 'rxjs';
import { SANS_AUTHENTIFICATION } from './http/contexte';
import { Session } from './http/session';

interface Identifiants {
  readonly courriel: string;
  readonly motDePasse: string;
}

@Injectable({ providedIn: 'root' })
export class Connexion {
  private readonly http = inject(HttpClient);
  private readonly session = inject(Session);

  // Se connecter avec un jeton perime ne sert a rien, et certaines API le
  // refusent : cette requete-la se dispense de l'intercepteur.
  seConnecter(identifiants: Identifiants): Observable<{ jeton: string }> {
    return this.http
      .post<{ jeton: string }>('/api/connexion', identifiants, {
        context: new HttpContext().set(SANS_AUTHENTIFICATION, true),
      })
      .pipe(tap(({ jeton }) => this.session.jeton.set(jeton)));
  }
}

import { HttpErrorResponse, type HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';

export const sessionExpireeInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((erreur: unknown) => {
      if (erreur instanceof HttpErrorResponse && erreur.status === 401) {
        // Ce rappel s'execute a l'arrivee de la reponse, bien apres le retour
        // de l'intercepteur : le contexte d'injection n'existe plus.
        void inject(Router).navigate(['/connexion']);
      }
      return throwError(() => erreur);
    }),
  );

// A la premiere reponse 401, l'appelant ne recoit pas l'HttpErrorResponse
// mais l'erreur levee dans le rappel (mode developpement, Angular 22.1) :
// NG0203: The `Router` token injection failed. `inject()` function must be
// called from an injection context such as a constructor, a factory function,
// a field initializer, or a function used with `runInInjectionContext`. Find
// more at https://v22.angular.dev/errors/NG0203

import { HttpErrorResponse, type HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';

export const sessionExpireeInterceptor: HttpInterceptorFn = (req, next) => {
  // Injecte pendant l'appel de l'intercepteur, donc dans le contexte ;
  // le rappel ne fait que lire la constante qu'il capture.
  const router = inject(Router);

  return next(req).pipe(
    catchError((erreur: unknown) => {
      if (erreur instanceof HttpErrorResponse && erreur.status === 401) {
        void router.navigate(['/connexion']);
      }
      // L'erreur continue vers l'appelant, qui peut encore la traiter.
      return throwError(() => erreur);
    }),
  );
};

// erreurs.ts
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { catchError, map, of, type Observable } from 'rxjs';
import type { Produit } from './catalogue';

export type Chargement<T> =
  { readonly ok: true; readonly valeur: T } | { readonly ok: false; readonly message: string };

// Ce qu'une API ASP.NET Core renvoie en cas d'erreur (RFC 9457).
interface ProblemDetails {
  readonly title?: string;
  readonly detail?: string;
}

export function messagePour(erreur: unknown): string {
  if (!(erreur instanceof HttpErrorResponse)) {
    throw erreur; // une erreur de programmation n'est pas une erreur HTTP
  }
  if (erreur.status === 0) {
    // Aucune reponse lisible : reseau coupe, serveur injoignable, reponse
    // bloquee par CORS, delai depasse. erreur.error est l'exception levee
    // par fetch, pas un corps.
    return 'Serveur injoignable, verifiez votre connexion.';
  }
  // Sinon, erreur.error est le corps de la reponse, deja lu comme JSON.
  const probleme = erreur.error as ProblemDetails | null;
  return probleme?.detail ?? probleme?.title ?? `Erreur ${erreur.status}`;
}

@Injectable({ providedIn: 'root' })
export class Fiches {
  private readonly http = inject(HttpClient);

  charger(reference: string): Observable<Chargement<Produit>> {
    return this.http.get<Produit>(`/api/produits/${encodeURIComponent(reference)}`).pipe(
      map((valeur) => ({ ok: true, valeur }) as const),
      // L'observable d'HttpClient ne rend qu'une valeur : le remplacer par of()
      // ne coupe aucun flux durable, contrairement au cas du cours RxJS.
      catchError((erreur: unknown) => of({ ok: false, message: messagePour(erreur) } as const)),
    );
  }
}

// Reponse 404 avec { "title": "Not Found", "detail": "Aucun produit K-999." } :
//   { ok: false, message: 'Aucun produit K-999.' }
// Serveur arrete :
//   { ok: false, message: 'Serveur injoignable, verifiez votre connexion.' }

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { retry, type Observable } from 'rxjs';
import type { Produit } from './catalogue';

@Injectable({ providedIn: 'root' })
export class Stock {
  private readonly http = inject(HttpClient);

  produit(reference: string): Observable<Produit> {
    // Un 404 part quatre fois de suite, sans attendre : le produit n'existera
    // pas davantage a la quatrieme. Un 503 est relance aussitot, contre un
    // serveur deja sature.
    return this.http.get<Produit>(`/api/produits/${encodeURIComponent(reference)}`).pipe(retry(3));
  }

  commander(reference: string, quantite: number): Observable<void> {
    // Le serveur a pu enregistrer la commande avant que la reponse se perde
    // (statut 0) ou qu'une passerelle expire (504) : chaque relance est
    // peut-etre une commande de plus.
    return this.http.post<void>('/api/commandes', { reference, quantite }).pipe(retry(3));
  }
}

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { retry, throwError, timer, type MonoTypeOperatorFunction, type Observable } from 'rxjs';
import type { Produit } from './catalogue';

// Relancer n'a de sens que si la meme requete peut reussir un peu plus tard.
// 501 (methode non implementee) et 505 (version HTTP refusee) ne changeront
// pas. Le statut 0 reste un pari : une coupure passe, un refus CORS non, et
// ses trois relances echoueront pareil.
const DEFINITIFS = new Set([501, 505]);

function passager(erreur: unknown): erreur is HttpErrorResponse {
  if (!(erreur instanceof HttpErrorResponse)) {
    return false;
  }
  const statut = erreur.status;
  return (
    statut === 0 || statut === 408 || statut === 429 || (statut >= 500 && !DEFINITIFS.has(statut))
  );
}

export function relancer<T>(tentatives = 3): MonoTypeOperatorFunction<T> {
  return retry({
    count: tentatives,
    delay: (erreur: unknown, essai: number) => {
      if (!passager(erreur)) {
        return throwError(() => erreur); // abandon : l'erreur d'origine passe telle quelle
      }
      // Retry-After (en secondes) si le serveur le donne, sinon 500, 1000, 2000 ms.
      const imposee = Number(erreur.headers.get('Retry-After'));
      return timer(imposee > 0 ? imposee * 1000 : 500 * 2 ** (essai - 1));
    },
  });
}

@Injectable({ providedIn: 'root' })
export class Stock {
  private readonly http = inject(HttpClient);

  // Une lecture est idempotente : la relancer ne change rien cote serveur.
  produit(reference: string): Observable<Produit> {
    return this.http
      .get<Produit>(`/api/produits/${encodeURIComponent(reference)}`)
      .pipe(relancer());
  }

  // Une ecriture ne se relance pas a l'aveugle : l'erreur remonte a l'ecran,
  // qui dira a l'utilisateur de verifier ses commandes avant de reessayer.
  commander(reference: string, quantite: number): Observable<void> {
    return this.http.post<void>('/api/commandes', { reference, quantite });
  }
}

// produit('K-1') contre 503, 503, puis 200 : requetes a 0, 500 et 1500 ms,
// puis la valeur. Quatre 503 : requetes a 0, 500, 1500 et 3500 ms, puis le 503.
// Un 429 avec Retry-After: 1 : seconde requete a 1000 ms.
// Un 404 : une seule requete, et le 404 tel quel.

// fiche-produit.ts
import { HttpErrorResponse, httpResource } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import type { Produit } from './catalogue';

@Component({
  selector: 'app-fiche-produit',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (produit.isLoading()) {
      <p>Chargement...</p>
    } @else if (produit.error()) {
      <p>{{ message() }}</p>
      <button type="button" (click)="produit.reload()">Reessayer</button>
    } @else if (produit.hasValue()) {
      <h2>{{ produit.value().libelle }}</h2>
      <p>{{ produit.value().prix }} EUR</p>
    }
  `,
})
export class FicheProduit {
  readonly reference = input.required<string>();

  // La fonction est suivie comme un computed : une nouvelle reference annule
  // la requete en cours et en lance une autre. Rendre undefined laisserait la
  // ressource au repos, sans requete.
  protected readonly produit = httpResource<Produit>(
    () => `/api/produits/${encodeURIComponent(this.reference())}`,
  );

  // error() est l'HttpErrorResponse de la requete : statut et corps compris.
  protected readonly message = computed(() => {
    const erreur = this.produit.error();
    return erreur instanceof HttpErrorResponse && erreur.status === 404
      ? "Ce produit n'existe pas."
      : 'Chargement impossible pour le moment.';
  });
}

// recherche.ts
import { httpResource } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import type { Produit } from './catalogue';

// Valide ce que le serveur renvoie au lieu de le croire sur parole.
function lireProduits(brut: unknown): Produit[] {
  if (!Array.isArray(brut)) {
    throw new Error('Reponse inattendue : un tableau etait attendu.');
  }
  return brut as Produit[];
}

@Component({
  selector: 'app-recherche',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input #champ type="search" [value]="terme()" (input)="terme.set(champ.value)" />
    <!-- Pendant le chargement, value() vaut la valeur par defaut, [] : sans
         ce premier cas, l'ecran annoncerait « Aucun resultat. » a tort. -->
    @if (resultats.isLoading()) {
      <p>Recherche en cours...</p>
    } @else if (resultats.error()) {
      <p>Recherche indisponible.</p>
    } @else if (resultats.status() === 'idle') {
      <p>Saisissez au moins deux lettres.</p>
    } @else {
      @for (produit of resultats.value(); track produit.reference) {
        <p>{{ produit.libelle }}</p>
      } @empty {
        <p>Aucun resultat.</p>
      }
    }
  `,
})
export class Recherche {
  protected readonly terme = signal('');

  // La forme requete : url, params, headers, comme les options d'HttpClient.
  // undefined tant que le terme est trop court : statut 'idle', aucune requete.
  protected readonly resultats = httpResource(
    () => {
      const terme = this.terme().trim();
      return terme.length < 2 ? undefined : { url: '/api/produits', params: { q: terme } };
    },
    { parse: lireProduits, defaultValue: [] },
  );
}