Fetch API

Цель: получить навыки использования Fetch API и Storage, изучить формат обмена данными JSON.

Теория для изучения

Изучите описание формата данных JSON и работу с ним с использованием глобального объекта JSON.
Познакомьтесь с функцией fetch() и объектом Response.
Прочитайте про async/await и связь асинхронных функций с объектом Promise.
Изучите работу с localStorage.

Источники

Практическая часть

Переключите на ветку main.
Убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.
Создайте ветку lab5 и работайте на ней.
Создайте новый документ html с H1 заголовком «ФИО - Лабораторная работа №5».
В созданный документ html добавьте две секции: для галереи и отправки температуры.
Выполните задания описанные ниже.
Проведите ручное тестирование в браузере.
Отформатируйте документы.
Убедитесь, что нет замечаний от ESLint.
Зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab5 в репозиторий на github.

Тост

Создайте компонент всплывающего уведомления (toasts), который после отображается на странице внизу справа и показывает информацию. Закрывается он по нажатию на соответствующую кнопку. Отображение и скрытие должно происходить плавно. Также он должен иметь разные стили для отображения ошибки (красный фон) и сообщения (зеленый фон). Не забывайте про контрастность и доступность, а также про отзывчивость (RWD).

Галерея

Сервер с документацией.
В галерее, используя AJAX, после загрузки страницы отправить запрос на получение изображений и отобразить их на странице. Если возникают какие-либо ошибки осуществить максимум 3 повторных запроса с небольшим интервалом. Если данные так и не удалось получить, то оповестить об этом пользователя с помощью компонента тоста. На время пока ожидается ответ от сервера, показать загрузчик, после получения ответа загрузчик должен замениться на контент или должно появится сообщение об ошибке. Если пришел пустой массив, то на месте галереи должен отображаться текст “Изображения не найдены”.
В начало этой же секции, добавить кнопку обновления галереи, при нажатии на которую отправляет запрос на получение изображений.
Все блоки изображений с подписями должны выглядеть одинаково, не смотря на размер изображения или длину текста. В один ряд помещается 4-изображения (используйте grid).

Температура

Сервер с документацией.
В этой секции добавьте форму для ввода номера аудитории и температуры. Не забудьте про доступность.
Для отправки данных из формы предотвратите стандартное поведение формы, сформируйте собственный post-запрос с помощью fetch. Не забудьте в заголовках указать тип передаваемого контента (Content-Type) и отправить данные с правильными типами (строка и число).
На время ожидания ответа от сервера заблокируйте возможность отправлять новые запросы из формы.
При успешной обработке данных на сервере с помощью тоста выведите сообщение из ответа и очистите форму. При ошибке, выведите сообщение ошибки в toast, но форму не очищайте.

Переключение темы

Подготовьте минимальные стили для светлой и темной тем (цвета можно взять например у DaisyUI в разделе List of themes). Добавьте хедер к странице и в нем кнопку для переключения светлой и темной темы. При перезагрузке страницы должна отображаться последняя выбранная тема (подсказка - localStorage) и не происходило “мерцания” темы, когда сначала отображается одна тема, а потом подгружается сохраненная (подсказка - необходимо воспользоваться порядком загрузки и выполнения кода JS). Рекомендуется использовать css переменные и переключение классов.

Требования к решению

HTML код валиден.
Отсутствуют ошибки ESLint.
Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы

Результаты работы проверены наставником.

Статическая веб-страница на локальной машине, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Вопросы для защиты

Определение и назначение AJAX.
Fetch API (функция и ее параметры, используемые объекты).
Объект Response. Его свойства и методы.
Формат JSON. Глобальный объект JSON и его методы.
Хранение данных на клиенте.
localStorage и sessionStorage. Разница, их методы.
Асинхронные функции async/await. Возвращаемые значения.
Проблема “цветных” функций.

Предыдущая Следующая

05

Fetch