fetch: загрузка JSON с обработкой ошибок

Основная идея

Fetch выполняет запрос и возвращает Promise с Response. Ответ со статусом 404 или 500 сам по себе обычно не отклоняет этот Promise. Поэтому после ожидания нужно проверить response.ok или конкретный status.

Чтение response.json тоже асинхронно и может завершиться ошибкой, если сервер вернул другой формат. После разбора проверьте структуру данных. Для междоменных запросов действуют правила CORS; no-cors не открывает доступ к закрытому ответу.

Пример JavaScript

async function loadArticles() {
  const response = await fetch("/api/articles", { headers: { Accept: "application/json" } });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data = await response.json();
  if (!Array.isArray(data)) throw new Error("Ожидался список");
  return data;
}
// Вызовите loadArticles() в своём проекте внутри try/catch.
// Адрес /api/articles должен обслуживаться вашим сервером.

Пример определяет функцию, но не отправляет запрос автоматически. Указанный адрес — учебный контракт API, а не готовый обработчик этого справочника.

Если собственный API вы пишете на Node.js, для его публикации потребуется отдельное серверное окружение: в разделе хостинга Node.js можно сопоставить варианты размещения, затем уточнить поддержку постоянного процесса и перезапуска приложения. Сам браузерный fetch не требует Node.js и может обращаться к API на другом стеке.

Частая ошибка

Самостоятельная проверка

На собственном тестовом API проверьте успешный ответ, 404, некорректный JSON и медленную сеть. Для отмены запроса изучите AbortController.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: асинхронность, разбор JSON.