</> Praktum

Главная / JavaScript / Загрузка данных

Урок 20 · JavaScript

Просим JSON и показываем три состояния

Пока данные едут, человеку нужно что показать. Пустая страница и ошибка — не одно и то же.

Почему это следующий шаг

Свои задачи уже сохраняются. Чужой список приходит запросом, и это другой порядок действий.

Как сделать

Сначала напиши «Загружаем». Потом fetch и проверка response.ok. Потом разбор JSON и проверка, что пришёл массив. В catch или при плохом статусе напиши, что пошло не так. Не рисуй объект целиком. Возьми понятные поля. Повторный запрос не должен дописывать старые карточки второй раз, если ты не очистил контейнер.

async function loadLessons() {
  const response = await fetch("/data/lessons.json");
  if (!response.ok) throw new Error(String(response.status));
  return response.json();
}

Что проверить

  • Есть состояния загрузка, готово и ошибка.
  • Плохой адрес не оставляет вечную надпись «загружаем».
  • Повтор не дублирует карточки.

Попробуй

Загрузи локальный JSON со списком из трёх уроков и выведи названия.

Практикум по теме