Advanced RxJS for HTTP: retry, backoff, and caching
Make your API layer resilient with retry strategies and cache responses to reduce load.
Production APIs sometimes fail temporarily. Your app should handle it gracefully. ## 1) retry with delay (simple backoff) ```ts import { retry, delay, of, throwError } from 'rxjs'; this.http.get('/api/data').pipe( retry({ count: 2, delay: (_err, retryCount) => of(null).pipe(delay(500 * retryCount)), }) ); ``` This retries up to 2 times with increasing delay. ## 2) Basic caching pattern If multiple components request same data, caching avoids repeated calls. ```ts import { shareReplay } from 'rxjs'; private products$ = this.http.get('/api/products').pipe( shareReplay(1) ); getProducts() { return this.products$; } ``` ## Why shareReplay(1) helps - first subscriber triggers request - later subscribers reuse cached response ## Warning Cache invalidation is real. If data changes often, add refresh logic. > Next: Angular animation basics and building smooth UI transitions.