http-client_skill

Overview

This skill teaches practical use of Angular's HttpClient for robust API communication, including request types, typed responses, and response parsing. It covers building API services, using interceptors for authentication and transformation, and implementing error handling and retry strategies. The material emphasizes reusable patterns for production-ready HTTP layers in Angular apps.

How this skill works

The skill walks through creating type-safe HttpClient calls (GET, POST, PUT, DELETE), configuring headers and query parameters, and parsing response bodies into TypeScript models. It explains how to implement HttpInterceptors to inject auth tokens, transform requests/responses, track loading state, and centralize error handling. Advanced topics show request cancellation, file upload/download with progress, RxJS-based retries, and simple caching patterns.

When to use it

• Building Angular services that consume RESTful APIs with type safety
• Adding authentication token injection and centralized request logic
• Implementing global error handling and retry policies for unreliable networks
• Uploading or downloading files with progress reporting
• Optimizing repeated requests with simple caching or cancellation

Best practices

• Type all request and response payloads with TypeScript interfaces to catch errors early
• Centralize token handling and error logic in interceptors to avoid duplication
• Use RxJS operators (retry, catchError, takeUntil) for retries and request cancellation
• Expose small, focused API service methods that compose HttpClient calls, not large monolithic services
• Emit user-friendly error messages and log detailed errors for diagnostics

Example use cases

• Create an AuthInterceptor that reads a JWT from storage and adds an Authorization header to outgoing requests
• Build a ProductService with typed endpoints: listProducts(), getProduct(id), createProduct(payload)
• Implement a retry strategy with exponential backoff for intermittent network failures
• Add a FileUploadService that reports upload progress and supports canceling the upload
• Cache GET responses for short-lived lists to reduce API calls and improve perceived performance