10

Fetch API

Fetch API

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

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

  1. Изучить работу с форматом данных JSON и глобальным объектом, изучить возможности Fetch API (fetch(), Response).
  2. Создать новую страницу fetch.html в проекте из предыдущих лабораторных работ. Добавить ссылку на эту страницу в меню макета.
  3. К fetch.html подключить вашу “нанобиблиотеку” из 4-й работы и добавить две секции: для галереи и отправки температуры.
  4. Модифицируйте компонент сообщений (toasts) из 7-й работы, чтобы для ошибок фон был красный, для сообщений - зеленый.
  5. Сервер с документацией.

Галерея

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

Температура

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

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

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

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

Источники

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

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