Урок 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 со списком из трёх уроков и выведи названия.
Практикум по теме
- Индикатор, пока данные в пути — Пока fetch не вернулся, повторные клики легко отправить тот же запрос несколько раз.