Promise.allSettled: независимые результаты без потери всей страницы

Список задач загрузился, статистика не ответила, а уведомления пришли позже. Если эти блоки независимы, нет причины скрывать всю страницу из-за одной ошибки. Promise.allSettled позволяет дождаться каждого результата и решить, что показать в каждом блоке. Сравним этот подход с Promise.all.

Собираем ответы по отдельности

async function loadJSON(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('HTTP ' + response.status);
  return response.json();
}
const results = await Promise.allSettled([
  loadJSON('/api/articles'),
  loadJSON('/api/statistics')
]);
results.forEach((result, index) => {
  if (result.status === 'fulfilled') render(index, result.value);
  else renderError(index, 'Раздел временно недоступен');
});

render и renderError в примере — функции вашего интерфейса. Массив результатов сохраняет порядок исходных операций, а не порядок завершения. У успешного элемента читают value, у отклонённого — reason. Проверка response.ok нужна отдельно: fetch не отклоняет promise только из-за ответа HTTP 500.

Когда нужен другой подход

Если все данные обязательны для одной операции, Promise.all может точнее выражать намерение. Однако его отклонение не отменяет уже запущенные запросы. Для отмены нужен отдельный механизм. allSettled также не делает операции зависимыми: второй запрос не получает автоматически результат первого.

Продумайте состояние загрузки для каждого блока. Пользователь должен понимать, что основной список готов, а статистика недоступна. Не выводите в публичный интерфейс необработанный текст серверной ошибки. Подробности фиксируйте в диагностике с учётом конфиденциальности.

Проверяем частичный отказ

Верните ошибку только для статистики: основной список должен остаться на месте, а повторная попытка — обновить нужный блок без дубликатов. Затем поменяйте порядок завершения запросов. Статистика и уведомления не должны попасть в чужие разделы только потому, что ответили раньше.

Источники и дальнейшее чтение

• MDN: Promise.allSettled
• MDN: Promise.all