Как реализовать таймаут для группы параллельных запросов, чтобы при превышении времени ожидания выбрасывалась ошибка?

Таймаут для группы параллельных запросов необходим, чтобы ограничить общее время выполнения нескольких асинхронных операций. Если запросы выполняются слишком долго, приложение должно выбросить ошибку, а не ждать бесконечно. Это улучшает пользовательский опыт и предотвращает зависание интерфейса.

Реализация с Promise.race

Самый простой способ — использовать Promise.race, который завершается, как только первый промис из массива разрешается или отклоняется. Создаём промис с таймером, который отклоняется через заданное время. Если он срабатывает раньше всех запросов, выбрасывается ошибка таймаута.

function fetchWithTimeout(urls, timeoutMs) {
  const requests = urls.map(url => fetch(url));
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), timeoutMs)
  );
  return Promise.race([...requests, timeoutPromise]);
}

Использование AbortController

Более продвинутый подход — использовать AbortController для отмены всех запросов при таймауте. Это позволяет освободить ресурсы и избежать лишних сетевых операций.

async function fetchWithAbort(urls, timeoutMs) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  try {
    const requests = urls.map(url =>
      fetch(url, { signal: controller.signal })
    );
    return await Promise.all(requests);
  } catch (err) {
    if (err.name === 'AbortError') {
      throw new Error('Timeout');
    }
    throw err;
  } finally {
    clearTimeout(timeoutId);
  }
}

Применение

Такой подход полезен при загрузке данных из нескольких источников, когда важно уложиться в лимит времени. Например, в панелях мониторинга или при агрегации данных от разных API.

Вывод: Используйте Promise.race для простого таймаута или AbortController для отмены запросов, когда нужно управлять ресурсами и предотвращать лишние операции.