Implement Fetch API patterns with retry, cancellation, and deduplication.
npx skills add https://github.com/mefardales/skillbox --skill ajax-patterns
Please help me install this Agent Skill. Skill: ajax-patterns Source: https://github.com/mefardales/skillbox/tree/main/skills/frontend/ajax-patterns Command: npx skills add https://github.com/mefardales/skillbox --skill ajax-patterns
This Skill addresses the complexities and common pitfalls in handling client-server communication using modern JavaScript APIs like Fetch, ensuring robust, efficient, and user-friendly data interactions.
AbortController.Use the ajax-patterns skill to implement a robust fetch request with retry logic for the '/api/users' endpoint.
High-intent search queries and answers about installing and using this skill.
Retry logic with exponential backoff for JavaScript fetch requests builds resilience against transient network issues by progressively increasing the wait time between repeated attempts. This pattern prevents overwhelming the server while ensuring temporary network failures are automatically resolved.
To cancel an ongoing fetch request and prevent race conditions, use the AbortController API. This mechanism allows you to abort unnecessary network activity cleanly when a user navigates away or triggers a new duplicate request.
Choosing between polling, SSE, and WebSockets for real-time data depends on your communication direction: polling is simplest for periodic checks, SSE is ideal for unidirectional server-to-client streaming, and WebSockets are necessary for bidirectional real-time interactions.
Request deduplication avoids redundant AJAX calls for the same resource by tracking active in-flight requests and returning the pending promise to subsequent callers. This pattern significantly reduces network overhead and improves perceived performance.
Handling file uploads with progress indication using the Fetch API involves combining XMLHttpRequest for upload progress tracking or utilizing streaming responses. This approach provides users with visual feedback during large file transfers.
Optimistic UI updates enhance perceived performance by updating the interface immediately before server confirmation in JavaScript. This pattern assumes the request will succeed, reverting the UI only if the server returns an error.
ali-masterIntegrate oRPC RPC capabilities into React Native using the Fetch API.
vecearStandardize loading, error, empty, and success states for data-fetching views.
planetaryescapeCreate optimistic chat messages with time-window deduplication in React.
jcsoftdevCoordinate React data fetching with TanStack Query or SWR for caching and deduplication.