← Zurück zu Web-App-Entwickler

Skill · Version 1.0.0

Angular-HTTP-Anbindung

Entwickelt typisierte HTTP-Dienste mit nachvollziehbaren Parametern, Interceptors, Abbruch und behandelbaren Fehlerzuständen.

angular-http

Teammitglieder mit diesem Skill

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill, wenn Angular-Ansichten ein API mit einheitlichem Fehlerverhalten benötigen.

Wobei hilft er dir?

  • Trennt Transportdaten von Ansichtsmodellen und kodiert Suchparameter korrekt.
  • Ändert Anfragen unveränderlich und nutzt anfragespezifischen Kontext.
  • Unterscheidet Rechte-, Validierungs- und Netzwerkfehler ohne blinde Schreibwiederholung.

Das könntest du fragen

Implementiere Bestellsuche und Speichern mit typisierten Diensten, abgebrochenen alten Suchen und zugeordneten Feldfehlern. Gib schnell zwei Suchbegriffe ein und speichere eine ungültige Postleitzahl. Nur aktuelle Treffer sollen erscheinen; der Feldfehler darf andere Änderungen nicht löschen.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

HTTP & Backend Integration

Keep HTTP communication in typed Angular services and interceptors with clear request lifecycles, error normalization and zero leaked server secrets.

1. Typed HttpClient services and parameters

  • Encapsulate API calls in dedicated domain/data services rather than calling HttpClient directly inside components.
  • Type every request and response (this.http.get<OrderSummaryDto>(...)) and map transport DTOs into domain models where the API shape differs from UI needs.
  • Build query strings with HttpParams (new HttpParams({ fromObject: ... })) or the params option object rather than manual string concatenation so special characters are properly URL-encoded.
  • Never embed server-side API keys or secrets in Angular environment files or client bundles.

2. Interceptors and HttpContext

  • Match the project's interceptor registration (withInterceptors([fn]) in provideHttpClient vs HTTP_INTERCEPTORS class providers).
  • Remember HttpRequest and HttpHeaders are immutable: always pass the result of req.clone({ setHeaders: ... }) to next(clonedReq).
  • Use HttpContext and HttpContextToken<T> to pass per-request metadata (such as skipping auth headers, suppressing global error toasts, or tagging cache policy) to interceptors cleanly without polluting URLs or headers.

3. Error handling, retries and cancellation

  • Normalize HttpErrorResponse (status 0 network/CORS failure, 401/403 auth, 422 validation errors, 5xx server failures) so components receive actionable error states.
  • Apply retry({ count, delay }) only to idempotent reads (GET) or transient network errors, never blindly to non-idempotent POST/PATCH mutations.
  • Understand that unsubscribing from HttpClient aborts the in-flight XHR/fetch request; use switchMap for reads/searches and exhaustMap or concatMap for mutations.

Before you finish

  • All HttpClient calls live in typed services and use HttpParams for query parameters.
  • Interceptors clone requests immutably and use HttpContextToken for per-request flags.
  • HttpErrorResponse statuses (0, 401/403, 422, 5xx) and cancellation are handled predictably.

Enthaltene Dateien 2

  • LICENSE.txt
  • SKILL.md