Перехватчики interceptors
Перехватчики (interceptors) в JavaScript Livewire позволяют
перехватывать и изменять поведение запросов к серверу.
Они дают возможность выполнять код до отправки запроса,
после получения ответа или в случае ошибки.
Перехватчики настраиваются через объект Livewire.hook
или глобальный массив Livewire.interceptors.
Синтаксис
Livewire.hook('interceptor_name', (data, next) => {
// Ваш код перехватчика
next();
});
Также можно использовать массив для регистрации нескольких перехватчиков:
Livewire.interceptors.push({
interceptor_name: function(data, next) {
// Ваш код перехватчика
next();
}
});
Пример с хуком beforeRequest
Перехватчик beforeRequest выполняется перед отправкой
запроса на сервер. Давайте добавим заголовок к запросу:
Livewire.hook('beforeRequest', (data, next) => {
data.headers['X-Custom-Header'] = 'CustomValue';
next();
});
Результат выполнения кода (в консоли браузера):
"Заголовок X-Custom-Header добавлен к запросу"
Пример с хуком afterRequest
Перехватчик afterRequest выполняется после получения
ответа от сервера. Используем его для логирования:
Livewire.hook('afterRequest', (data, next) => {
console.log('Запрос выполнен', data.response);
next();
});
Результат выполнения кода (в консоли браузера):
"Запрос выполнен {status: 200, data: {...}}"
Пример с хуком onError
Перехватчик onError срабатывает при возникновении
ошибки в запросе. Обработаем ошибку:
Livewire.hook('onError', (data, next) => {
console.error('Ошибка запроса:', data.error);
next();
});
Результат выполнения кода (в консоли браузера):
"Ошибка запроса: Network Error"
Пример с хуком beforeRequest и отменой
Можно отменить запрос в перехватчике beforeRequest,
вызвав next(false):
Livewire.hook('beforeRequest', (data, next) => {
if (data.payload.method === 'delete') {
console.log('Запрос удаления отменен');
next(false);
} else {
next();
}
});
Результат выполнения кода (в консоли браузера):
"Запрос удаления отменен"
Пример с хуком afterRequest и модификацией данных
В перехватчике afterRequest можно изменить данные
ответа:
Livewire.hook('afterRequest', (data, next) => {
if (data.response && data.response.data) {
data.response.data.modified = true;
}
next();
});
Результат выполнения кода (в консоли браузера):
"Данные ответа изменены, добавлен флаг modified"
