Разбери типичные ошибки при работе с Promise.all и массивом fetch-запросов (обработка результата fetch, применение .ok к результату Promise.all, отсутствие return в .map) — как их исправить?

Типичные ошибки при работе с Promise.all и fetch

При использовании Promise.all с массивом fetch-запросов разработчики часто допускают несколько распространенных ошибок, которые могут привести к неожиданному поведению или падению приложения.

Ошибка 1: Необработка статуса ответа fetch

fetch не считает HTTP-ошибки (например, 404 или 500) исключениями — он успешно разрешается, даже если сервер вернул ошибку. Нужно проверять response.ok внутри каждого запроса.

// Неправильно
const urls = ['/api/1', '/api/2'];
const promises = urls.map(url => fetch(url));
const results = await Promise.all(promises);
// results может содержать ответы с ошибками

// Правильно
const promises = urls.map(async url => {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP error ${response.status}`);
  return response.json();
});
const results = await Promise.all(promises);

Ошибка 2: Отсутствие return в .map

Если в .map не вернуть промис, массив будет содержать undefined, и Promise.all разрешится с undefined.

// Неправильно
const promises = urls.map(url => {
  fetch(url); // нет return
});

// Правильно
const promises = urls.map(url => fetch(url));
// или с async
const promises = urls.map(async url => {
  const res = await fetch(url);
  return res.json();
});

Ошибка 3: Применение .ok к результату Promise.all

Promise.all возвращает массив результатов, а не отдельный ответ. Нельзя проверить .ok на всем массиве.

// Неправильно
const results = await Promise.all(promises);
if (!results.ok) { ... } // results — массив, нет .ok

// Правильно — проверять каждый ответ отдельно

Вывод

Всегда проверяйте response.ok внутри каждого fetch, явно возвращайте промис из .map и обрабатывайте ошибки через catch. Это обеспечит надежную работу с параллельными запросами.