04

Promise

Promise

Цель: получить представление об асинхронности и цикле событий (Event Loop), научиться пользоваться функциями обратного вызова, объектом Promise и его методами.

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

  1. Замыкания и принцип их работы.
  2. Асинхронность, цикл событий (Event Loop), функции обратного вызова.
  3. Таймеры: setTimeout, setInterval, clearInterval.
  4. Объект Promise и его методы.

Источники

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

  1. Переключите на ветку main.
  2. Убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.
  3. Создайте ветку lab4 и работайте на ней.
  4. Создайте документ html с H1 заголовком «ФИО - Лабораторная работа №4».
  5. Решите предложенные задачи используя JS и подключите решения к созданной странице. Элементы интерфейса для задач разместить в отдельных секциях с соответствующими подзаголовками.
  6. Проведите ручное тестирование в браузере.
  7. Отформатируйте документы.
  8. Убедитесь, что нет замечаний от ESLint.
  9. Зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab3 в репозиторий на github.
  10. Загрузите проект на Render через смену ветки в настройках.

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

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

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

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

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

Задачи

Resolve

В интерфейсе добавить кнопку, при нажатии на которую вызывается функция job. Эта функция возвращает объект promise. Promise должен разрешиться через 2 секунды после вызова функции job и представляет строку “работа сделана” в данных, и эта же строка отображается в виде текста в интерфейсе под кнопкой.

Случайные данные и ошибки

Напишите функцию getData, которая в качестве аргумента принимает вероятность появления ошибки (значение по умолчанию 0.5) и строку с данными, в локальной области видимости к переданной строке в начало добавляет “Синтетические данные: ”, а возвращает функцию. Возвращаемая функция в качестве аргумента принимает число, проверяет что аргумент является числом (не забыть про NaN) и с указанной долей вероятности возвращает либо данные, либо null.

Крафт

Вы создаете простую систему крафта, в которой пользователи могут создавать виртуальные предметы. Для создания каждого предмета есть определенное время, и может потребоваться сначала создать другие предметы.

Пример базовой системы крафта:

  • Чтобы изготовить кирку, вам понадобится палка и железный слиток.
  • Чтобы изготовить палку, вам понадобится дерево.
  • Чтобы изготовить железный слиток, вам понадобится железная руда.

Процесс изготовления асинхронен, то есть для изготовления каждого предмета требуется некоторое время. Вам надо использовать Promise, чтобы справиться с этими задержками и зависимостями.

Возможные структуры данных:

  • Объект inventory для хранения доступных предметов
  • Объект для хранения данных о предмете включая: name (название предмета), craftingTime (время в миллисекундах, необходимое для создания предмета), requiredItems (массив предметов, необходимых для создания этого предмета; может быть пустым, если предметы не требуются), failProbability (число от 0 до 1, обозначающее вероятность провала создания; вероятность проверяется по истечении таймера).

Создайте простой HTML-интерфейс:

  • Кнопки для каждого предмета, который можно изготовить с количеством готового.
  • Индикатор создания для каждого предмета.
  • Область вывода для отображения прогресса и результатов создаваемого предмета (например, “Создание…”, “Успех”, “Неудача”).

Общий сценарий:

  • Пользователь нажимает кнопку (например, “Создать кирку”).
  • Система проверяет, доступны ли необходимые дополнительные предметы (например, палка, железный слиток).
  • Если дополнительные предметы необходимы:
    • Система начинает создавать их асинхронно.
    • Пользовательский интерфейс обновляется, чтобы показать статус каждого предмета.
  • Как только все элементы будут готовы, система начнет создавать основной элемент. Если какой-либо из них не будет создан, то созданные предметы сохраняются в инвентаре, а выполнение основного предмета завершается с ошибкой.
  • Интерфейс показывает прогресс и результат для всех предметов.

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

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

  1. Стек вызова (call stack).
  2. Функции обратного вызова (callbacks).
  3. Таймеры в JS. Создание и удаление.
  4. Замыкание и примеры применения.
  5. Асинхронное программирование в JS.
  6. Общий принцип работы event loop.
  7. Объект Promise и его состояния.
  8. Методы объекта promise. Примеры их использования.
Предыдущая Следующая