Коротко — проблема: `Promise.all([...])` «падает» при первом же `reject` и не даёт работать с частично успешными ответами; нет таймаутов, нет отмены/повторов, не проверяется `response.ok`; UI не показывает прогресс/частичные данные => плохой UX и сложность тестирования.
Возможные ошибки в подходе
- Использование `Promise.all` для независимых запросов: если один запрос падает — всё считается проваленным.
- Отсутствие таймаута/AbortController → висит запрос и блокирует UX.
- Не проверяется `response.ok` и не обрабатывается JSON-парсинг/формат ошибок.
- Нет проверки соответствия результатов исходным запросам (порядок/идемпотентность).
- Нет стратегии повторов/экспоненциального бэкоффа и лимита параллелизма.
- UI одна большая загрузка вместо покомпонентной (нет частичных рендеров / прогресса).
- Трудно тестировать из‑за tightly coupled fetch-логики и отсутствия абстракций.
Рекомендации по улучшению (UX и тестируемость)
1) Обрабатывать частичные результаты: Promise.allSettled
- Позволяет получить и успешные, и неуспешные ответы и отобразить частично:
- успешные — показать данные,
- неуспешные — показать ошибку/кнопку «повторить»/placeholder.
2) Таймаут и отмена: AbortController
- Каждый fetch оборачивать в таймаут + AbortController, чтобы не ждать бесконечно и дать пользователю возможность отменить.
3) Проверять HTTP-статусы и парсинг
- Всегда проверять `response.ok`, и аккуратно парсить `response.json()` в try/catch, возвращая понятную причину ошибки.
4) Повторы и экспоненциальный backoff для кратковременных проблем
- Делать ограниченное число повторов для сетевых ошибок/5xx с экспоненциальной задержкой.
5) Ленивая/инкрементальная загрузка и прогресс
- Рендерить элементы по мере поступления данных, показывать skeletons/placeholderы и индикаторы статуса для каждого элемента.
6) Ограничение параллелизма
- Для большого числа запросов — ограничить одновременно выполняющиеся (p-limit или очередь) чтобы не перегружать сеть.
7) Кэширование / stale-while-revalidate
- Показать кэшированные данные мгновенно, затем обновить фоном.
8) Тестируемость
- Абстрагировать fetch в обёртку, инжектить её в компоненты/функции.
- Мокать fetch/AbortController в тестах, использовать fake timers для таймаутов и backoff.
- Писать тесты для: успешного, частичного успеха, таймаута, повторов, отмены.
Примеры (схематично)
1) Wrapper с таймаутом и AbortController
const TIMEOUT_MS = Number($5000$); // таймаут в мс
async function fetchWithTimeout(url, opts = {}, timeoutMs = TIMEOUT_MS) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeoutMs);
try {
const res = await fetch(url, { ...opts, signal: controller.signal });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} finally {
clearTimeout(id);
}
}
2) Частичная обработка — Promise.allSettled
async function loadAll(urls) {
const promises = urls.map(u => fetchWithTimeout(u));
const results = await Promise.allSettled(promises);
return results.map((r, i) => ({
url: urls[i],
status: r.status,
value: r.status === 'fulfilled' ? r.value : r.reason
}));
}
// UI: для каждого элемента — показать данные при fulfilled, ошибку/кнопку retry при rejected
3) Простой retry с экспоненциальным backoff
async function retry(fn, attempts = Number($3$), delayMs = Number($500$)) {
let attempt = 0;
while (true) {
try { return await fn(); }
catch (err) {
attempt++;
if (attempt >= attempts) throw err;
await new Promise(r => setTimeout(r, delayMs * Math.pow(2, attempt - 1)));
}
}
}
4) Ограничение параллелизма (пример-псевдо)
- Использовать библиотеку p-limit или простую очередь: выполнять не более N параллельных fetch.
Тестирование
- Инжектить fetch: функция loadAll(fetchImpl) — в тестах передаёте мок.
- Мокировать AbortController/симулировать abort.
- Использовать fake timers (Jest) для проверки таймаутов и backoff.
- Тестировать UI состояния: loading per item, success per item, retry flow.
Короткая практика UX-решений
- Показывать элемент по мере готовности, не блокируя остальные.
- Для медленных/падающих — показать состояние «ошибка» и кнопку «повторить».
- Если важно согласованное состояние: показывать «частично загружено» с возможностью «обновить всё».
Итог: замените `Promise.all` на стратегию, дающую частичные результаты (`allSettled` / инкрементальные обновления), добавьте `AbortController`/таймауты, проверку `response.ok`, retry/backoff и ограничение параллелизма; абстрагируйте fetch для моков в тестах.