Angular-HTTP-Anbindung
Entwickelt typisierte HTTP-Dienste mit nachvollziehbaren Parametern, Interceptors, Abbruch und behandelbaren Fehlerzuständen.
angular-http
Entdecke, wie der Skill hilftWann 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.
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
HttpClientdirectly 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 theparamsoption 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])inprovideHttpClientvsHTTP_INTERCEPTORSclass providers). - Remember
HttpRequestandHttpHeadersare immutable: always pass the result ofreq.clone({ setHeaders: ... })tonext(clonedReq). - Use
HttpContextandHttpContextToken<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(status0network/CORS failure,401/403auth,422validation errors,5xxserver failures) so components receive actionable error states. - Apply
retry({ count, delay })only to idempotent reads (GET) or transient network errors, never blindly to non-idempotentPOST/PATCHmutations. - Understand that unsubscribing from
HttpClientaborts the in-flight XHR/fetchrequest; useswitchMapfor reads/searches andexhaustMaporconcatMapfor mutations.
Before you finish
- All
HttpClientcalls live in typed services and useHttpParamsfor query parameters. - Interceptors clone requests immutably and use
HttpContextTokenfor per-request flags. -
HttpErrorResponsestatuses (0,401/403,422,5xx) and cancellation are handled predictably.
Enthaltene Dateien 2
LICENSE.txtSKILL.md
Über dieses Skill-Paket
angular-http
angular-http: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.
Weniger anzeigen
angular-http
angular-http: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.
Enthält den vollständigen Skill und seine Begleitdateien (2 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.
Ursprüngliche Skill-Beschreibung (Quellsprache)
Use when building or reviewing Angular HttpClient services, functional or class-based HTTP interceptors, request/response typing, HttpParams, HttpContext tokens, retry/timeout policies and API error handling.
Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.
Voraussetzungen
- Orqestria auf deinem Computer installiert.
