Як перехоплювати запити Livewire в JavaScript: інтерсептори дій, повідомлень і запитів?

Livewire 4 замінив хуки commit і request з v3 на інтерсептори трьох рівнів.

Кожен інтерсептор повертає функцію відписки.

Дія - найточніший рівень:

<script>
    this.intercept('delete', ({ action, onSuccess, onError }) => {
        if (! confirm('Видалити?')) {
            action.cancel();
            return;
        }
        onSuccess(() => showToast('Видалено'));
        onError(({ preventDefault }) => {
            preventDefault();          // не показувати модальне вікно помилки
            showToast('Не вдалося видалити', 'error');
        });
    });
</script>

Колбеки: onSend, onCancel, onSuccess (з поверненим значенням методу), onError (відповідь з помилкою сервера), onFailure (мережева помилка), onFinish.

Повідомлення - доступ до корисного навантаження й етапів застосування відповіді: onSend({ payload }) (знімок, оновлення, виклики), onSuccess з вкладеними onSync, onEffect, onMorphed, onRender. Корисно, щоб ініціалізувати сторонні бібліотеки після морфінгу DOM.

Запит - глобальні речі на рівні HTTP:

Livewire.interceptRequest(({ onError }) => {
  onError(({ response, preventDefault }) => {
    if (response.status === 419) {          // сесія чи CSRF-токен застаріли
      preventDefault();
      if (confirm('Сесія завершилася. Оновити сторінку?')) location.reload();
    }
  });
});

Також onRedirect (скасувати редирект), onDump (перехопити вивід dd()), onResponse, onStream.

Типові застосування:

• глобальна обробка помилок - 419 (сесія), 403, 500 у вигляді власного повідомлення замість типового модального вікна з HTML помилки;
• індикатори завантаження для складних випадків, де wire:loading замало;
• аналітика й моніторинг - час відповіді, помилки, назви дій;
• додаткові заголовки запиту на рівні застосунку.

Порядок для успішного повідомлення: onSuccess → onSync → onEffect → onMorph → onMorphed → onFinish → onRender (у наступному кадрі анімації). Код, що читає оновлений DOM, - в onMorphed, а не в onSuccess.

Що варто пам'ятати: інтерсептори - клієнтський код. Скасування дії в інтерсепторі (action.cancel()) - це UX, а не захист: дію можна викликати й без нього.

Докладніше в документації: JavaScript: інтерсептори