htmx:config:request

Когда срабатывает

После того как htmx сформировал контекст запроса, но до htmx:confirm или htmx:before:request.

Детали события

Событие предоставляет объект ctx со следующей структурой:

{
    sourceElement,  // Element that triggered the request
    sourceEvent,    // Event that triggered it
    target,         // Where the response will go
    select,         // hx-select value
    selectOOB,      // hx-select-oob value
    swap,           // hx-swap value
    push,           // hx-push-url value
    replace,        // hx-replace-url value
    transition,     // Whether to use view transitions
    request: {
        validate,     // Whether to validate the form
        action,       // Request URL
        method,       // HTTP method
        headers,      // Request headers object
        body,         // Request body (FormData)
        credentials,  // Fetch credentials mode
        mode,         // Fetch mode
        cache,        // Fetch cache mode
        timeout,      // Timeout in milliseconds
        // ... any other fetch options
    }
}

Вы можете изменить любое свойство, чтобы изменить запрос.

Вызовите evt.preventDefault(), чтобы отменить запрос.

Примеры

Добавление аутентификации ко всем запросам

document.body.addEventListener('htmx:config:request', function(evt) {
    evt.detail.ctx.request.headers['X-Auth-Token'] = getAuthToken();
});

Установка более длительного времени ожидания для определённой конечной точки

htmx.on('htmx:config:request', (evt) => {
    if (evt.detail.ctx.request.action.includes('/slow-endpoint')) {
        evt.detail.ctx.request.timeout = 30000;
    }
});

Добавление учётных данных в запросы CORS

document.body.addEventListener('htmx:config:request', function(evt) {
    if (evt.detail.ctx.request.action.startsWith('https://api.example.com')) {
        evt.detail.ctx.request.credentials = 'include';
        evt.detail.ctx.request.mode = 'cors';
    }
});

Отмена запроса по условию

htmx.on('htmx:config:request', (evt) => {
    if (!isUserAuthorized()) {
        evt.preventDefault();
    }
});

Примечания

• Это идеальное место для глобального изменения конфигурации запросов
• Изменения, внесённые здесь, применяются после обработки атрибутов hx-config
• Используйте это для сквозных задач, таких как аутентификация, ведение журнала или настройка глобального времени ожидания