Занятие 6. Сетевые запросы: Fetch API

Демонстрация запросов

Нажмите кнопку и наблюдайте за состоянием: загрузка → успех или ошибка.

Готово к работе

Здесь появится ответ сервера…

Локальный запрос требует http(s). При открытии страницы напрямую с диска (file://) браузер заблокирует fetch из-за политики CORS. На хостинге всё работает.

Базовый шаблон запроса

async function loadData(url) {
  const response = await fetch(url);

  // ВАЖНО: fetch не отклоняет промис при 404 и 500!
  if (!response.ok) {
    throw new Error('HTTP ' + response.status + ': ' + response.statusText);
  }

  return response.json();
}

try {
  const data = await loadData('/api/items');
  console.log(data);
} catch (error) {
  console.error('Запрос не удался:', error.message);
}

Самая частая ошибка новичков — считать, что fetch сам «падает» при ошибке 404. Нет: промис отклоняется только при сетевом сбое. Код ответа нужно проверять вручную через response.ok.

Состояния загрузки

button.disabled = true;
showSpinner(true);

try {
  const data = await loadData(url);
  render(data);
} catch (e) {
  showError(e.message);
} finally {
  button.disabled = false;   // finally выполнится в любом случае
  showSpinner(false);
}

Что важно помнить про HTTP

Код	Значение	Что делать клиенту
200	OK	Обработать данные
301 / 302	Перенаправление	fetch следует автоматически
400	Некорректный запрос	Показать ошибку валидации
401 / 403	Нет доступа	Запросить авторизацию
404	Не найдено	Сообщить пользователю
500	Ошибка сервера	Предложить повторить позже

Задание

Выведите данные не в <pre>, а карточками в сетке Grid.
Добавьте кнопку «Отмена» через AbortController.
Кешируйте результат в localStorage и показывайте его, если сети нет.
Замерьте через performance.now(), сколько миллисекунд занял запрос, и выведите это пользователю.