Composable для retry: ```javascript // composables/useRetry.js import { ref } from 'vue' export function useRetry(fn, options = {}) { const { maxAttempts = 3, baseDelay = 1000, maxDelay = 10000, backoffMultiplier = 2, retryOn = (error) => { const status = error.response?.status // Повторяем при сетевых ошибках и 5xx, 429 if (!status) return true // Network error if (status === 429) return true // Rate limited if (status >= 500) return true // Server error return false } } = options const attempts = ref(0) const isRetrying = ref(false) const error = ref(null) async function execute(...args) { attempts.value = 0 error.value = null isRetrying.value = false while (attempts.value < maxAttempts) { try { attempts.value++ return await fn(...args) } catch (err) { error.value = err if (attempts.value >= maxAttempts || !retryOn(err)) { throw err } isRetrying.value = true const delay = Math.min( baseDelay * Math.pow(backoffMultiplier, attempts.value - 1), maxDelay ) // Добавляем jitter для предотвращения thundering herd const jitter = delay * 0.1 * Math.random() await new Promise(r => setTimeout(r, delay + jitter)) } } } return { execute, attempts, isRetrying, error } } ``` Axios interceptor для retry: ```javascript // api/retryInterceptor.js export function setupRetryInterceptor(client, options = {}) { const { maxRetries = 3, baseDelay = 1000, retryableStatuses = [408, 429, 500, 502, 503, 504], retryableMethods = ['get', 'head', 'options', 'put', 'delete'] } = options client.interceptors.response.use(null, async (error) => { const config = error.config config._retryCount = config._retryCount || 0 const isRetryable = config._retryCount < maxRetries && retryableMethods.includes(config.method) && ( !error.response || retryableStatuses.includes(error.response.status) ) if (!isRetryable) return Promise.reject(error) config._retryCount++ // Respect Retry-After header const retryAfter = error.response?.headers?.['retry-after'] let delay if (retryAfter) { delay = parseInt(retryAfter, 10) * 1000 } else { delay = baseDelay * Math.pow(2, config._retryCount - 1) } console.debug( `[Retry] ${config.method?.toUpperCase()} ${config.url} ` + `attempt ${config._retryCount}/${maxRetries} after ${delay}ms` ) await new Promise(r => setTimeout(r, delay)) return client(config) }) } ``` ```javascript // api/client.js import { setupRetryInterceptor } from './retryInterceptor' const apiClient = axios.create({ baseURL: '/api' }) setupRetryInterceptor(apiClient, { maxRetries: 3 }) ``` Retry с отменой: ```javascript // composables/useRetryWithCancel.js import { ref, onUnmounted } from 'vue' export function useRetryWithCancel(fn, options = {}) { const { maxAttempts = 3, baseDelay = 1000 } = options const isRetrying = ref(false) const attempts = ref(0) let cancelled = false let timeoutId = null async function execute(...args) { cancelled = false attempts.value = 0 isRetrying.value = false while (attempts.value < maxAttempts && !cancelled) { try { attempts.value++ return await fn(...args) } catch (err) { if (cancelled || attempts.value >= maxAttempts) throw err isRetrying.value = true const delay = baseDelay * Math.pow(2, attempts.value - 1) await new Promise((resolve) => { timeoutId = setTimeout(resolve, delay) }) isRetrying.value = false } } } function cancel() { cancelled = true clearTimeout(timeoutId) isRetrying.value = false } onUnmounted(cancel) return { execute, isRetrying, attempts, cancel } } ``` Использование: ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Нестабильный мобильный интернет** -- retry спасает от мимолётных сбоев сети 🔹 **Rate limiting (429)** -- уважай `Retry-After` header, не спамь сервер 🔹 **Microservices** -- 502/503 при деплое, retry пережидает перезапуск контейнера --- ## Частые ошибки ```javascript // ❌ Retry для POST -- дублирование данных if (error.response.status >= 500) { return axios(config) // POST /orders -- заказ создастся дважды! } // ✅ Только idempotent методы const safe = ['get', 'head', 'put', 'delete'] if (safe.includes(config.method)) { return axios(config) } // ❌ Retry без backoff -- перегрузка сервера for (let i = 0; i < 3; i++) { try { return await fetch(url) } catch {} } // ✅ Exponential backoff + jitter const delay = baseDelay * Math.pow(2, attempt) const jitter = delay * 0.1 * Math.random() await sleep(delay + jitter) // ❌ Retry при 400/401/403/404 -- бессмысленно // Эти ошибки не исчезнут при повторе // ✅ Retry только при транзиентных ошибках if (status >= 500 || status === 429 || !status) retry() ``` --- ## Резюме | Правило | Деталь | |---|---| | Что повторять | GET, PUT, DELETE (idempotent) | | Когда повторять | 5xx, 429, network error | | Не повторять | 4xx (кроме 429), POST | | Backoff | Exponential: 1с, 2с, 4с + jitter | | Лимит | 3-5 попыток максимум | | Retry-After | Уважай header от сервера | ---

Как реализовать повторные попытки (retry) для API-запросов?