06

Fetch

Fetch API

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

Содержание и порядок выполнения лабораторной работы:

  1. Изучить работу с форматом данных JSON и глобальным объектом, изучить возможности Fetch API (fetch(), Response).
  2. Создать от ветки main ветку lab6.
  3. Создать документ html с H1 заголовком «ФИО - Лабораторная работа №6».
  4. В документе html добавить две секции: для галереи и отправки температуры.
  5. Создать компонент всплывающего уведомления (toasts), который после отображается на странице внизу справа и показывает информацию. Закрывается он по нажатию на соответствующую кнопку. Отображение и скрытие должно происходить плавно. Также он должен иметь разные стили для отображения ошибки (красный фон) и сообщения (зеленый фон). Не забывайте про контрастность.
  6. Сервер с документацией.

Галерея

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

Температура

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

Требования к JS:

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

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

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

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

Источники

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

  1. Суть AJAX.
  2. Что такое и как работает Fetch API?
  3. На базе чего построен Fetch API?
  4. Какие есть свойства и методы у объекта Response?
  5. Как получить данные из тела запроса?
  6. Какие параметры у функции fetch?
  7. Формат JSON?
Предыдущая Следующая