События жизненного цикла

HTMX предоставляет обширный набор событий жизненного цикла, которые позволяют разработчикам контролировать и настраивать поведение компонентов на протяжении всего процесса их жизни. Эти события можно использовать для обработки различных стадий взаимодействия с сервером и манипулирования DOM-элементами на клиентской стороне. События жизненного цикла делятся на несколько ключевых этапов: до запроса, во время запроса, после запроса и после обновления DOM.

1. События до запроса

На этом этапе HTMX ещё не отправил запрос на сервер, но разработчик может вмешаться в процесс, чтобы изменить параметры запроса или выполнить дополнительные действия.

htmx:configRequest Это событие вызывается до того, как будет сформирован и отправлен запрос. Оно позволяет модифицировать запрос, например, изменить URL, добавить заголовки или изменить тело запроса. Это полезно для того, чтобы настроить запрос под конкретные условия или выполнить предварительные проверки.

Пример использования:

<div hx-get="/api/data" hx-trigger="click" 
     hx-target="#result" 
     hx-on="htmx:configRequest: modifyRequest">

<script>
  function modifyRequest(event) {
    let xhr = event.detail.xhr;
    xhr.setRequestHeader('Custom-Header', 'value');
  }
</script>

htmx:beforeRequest Это событие возникает непосредственно перед отправкой запроса на сервер. Оно даёт возможность отменить запрос или модифицировать данные перед отправкой. Если в обработчике события возвращается значение false, запрос не будет отправлен.

Пример:

<button hx-get="/api/data" hx-trigger="click" 
        hx-on="htmx:beforeRequest: checkData">
    Получить данные
</button>

<script>
  function checkData(event) {
    let data = getData();
    if (!data) {
      event.preventDefault(); // Запрещает отправку запроса
    }
  }
</script>

2. События во время запроса

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

htmx:send Это событие срабатывает, когда запрос отправляется. Оно даёт возможность обновить пользовательский интерфейс, чтобы указать на процесс отправки данных, например, отобразить индикатор загрузки.

Пример:

<button hx-get="/api/data" hx-trigger="click" 
        hx-on="htmx:send: showLoading">
    Загружать данные
</button>

<script>
  function showLoading(event) {
    document.getElementById("loading").style.display = "block";
  }
</script>

htmx:loading Это событие вызывается в момент, когда запрос находится в процессе выполнения. Оно полезно для реализации механизма отображения индикатора загрузки, который исчезает, как только запрос завершён.

<div id="loading" style="display:none">Загрузка...</div>
<button hx-get="/api/data" hx-trigger="click" hx-target="#result" 
        hx-on="htmx:loading: showLoading">
    Получить данные
</button>

3. События после запроса

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

htmx:afterRequest Событие срабатывает после того, как запрос был завершён, но до того, как будут обновлены элементы DOM. Это событие полезно для выполнения действий после получения ответа от сервера, таких как обработка ошибок или запуск анимаций.

Пример:

<button hx-get="/api/data" hx-trigger="click" 
        hx-on="htmx:afterRequest: processData">
    Обработать ответ
</button>

<script>
  function processData(event) {
    let response = event.detail.xhr.responseText;
    console.log("Ответ от сервера: ", response);
  }
</script>

htmx:responseError Это событие срабатывает, если сервер вернул ошибку, например, код состояния 500 или 404. Его можно использовать для обработки ошибок и отображения соответствующих сообщений пользователю.

<div hx-get="/api/data" hx-trigger="click" hx-target="#result"
     hx-on="htmx:responseError: showError">
    Получить данные
</div>

<script>
  function showError(event) {
    alert("Произошла ошибка при загрузке данных.");
  }
</script>

4. События после обновления DOM

После того как данные были успешно получены и элементы на странице обновились, HTMX генерирует события, которые позволяют разработчику выполнять дополнительные действия, связанные с изменениями DOM.

htmx:afterSwap Событие срабатывает после того, как HTMX завершил обновление DOM. Оно даёт возможность выполнить дополнительные действия с элементами, которые были обновлены, например, инициализировать компоненты или подключить обработчики событий.

<div hx-get="/api/data" hx-trigger="click" 
     hx-target="#result" hx-on="htmx:afterSwap: initializeComponents">
    Загрузить данные
</div>

<script>
  function initializeComponents(event) {
    let updatedElement = event.target;
    console.log("DOM обновлён:", updatedElement);
  }
</script>

htmx:afterSettle Это событие возникает после того, как DOM был обновлён и все визуальные анимации завершены. Его можно использовать для запуска более сложных операций, которые должны произойти после полного завершения изменений на странице.

<div hx-get="/api/data" hx-trigger="click" 
     hx-target="#result" hx-on="htmx:afterSettle: finalizeUI">
    Обновить интерфейс
</div>

<script>
  function finalizeUI(event) {
    console.log("Все анимации завершены, интерфейс готов.");
  }
</script>

5. Остановка запроса

Для управления временем жизни запросов и отмены запросов могут быть полезны следующие события:

htmx:abort Событие срабатывает, когда запрос был отменён. Это может происходить при вызове abort() у объекта XMLHttpRequest. Оно полезно для отмены операций или очистки ресурсов.

Пример:

<button hx-get="/api/data" hx-trigger="click" 
        hx-on="htmx:abort: cleanup">
    Отменить запрос
</button>

<script>
  function cleanup(event) {
    console.log("Запрос был отменён");
  }
</script>

Заключение

События жизненного цикла HTMX дают разработчику полный контроль над процессом отправки запросов и обработки ответов. Использование этих событий позволяет оптимизировать работу с интерфейсом, добавлять кастомные элементы управления состоянием и адаптировать взаимодействие с сервером под конкретные нужды.

Оглавление