Директива use:enhance
Постепенно улучшайте отправку форм с помощью fetch на стороне клиента без полной перезагрузки
«Директива use:enhance» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Прогрессивное улучшение
Формы работают без JS; use:enhance улучшает их, превращая отправку в быстрые запросы без перезагрузки страницы.
Импорт enhance
Из $app/forms.
import { enhance } from "$app/forms";Применение к форме
Используйте директиву use: на элементе формы.
<form method="POST" use:enhance>...</form>Без перезагрузки
Страница не перезагружается. SvelteKit отправляет данные через fetch, обрабатывает действие и реактивно обновляет страницу.
Пользовательский обработчик
Передайте функцию обратного вызова в enhance, чтобы точно управлять отправкой.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Поведение по умолчанию
Без функции обратного вызова enhance перенаправляет пользователя или обновляет данные точно так же, как это происходило бы при полной отправке страницы.
Состояние загрузки
Отслеживайте состояние отправки с помощью локальной переменной в функции обратного вызова, чтобы показывать индикаторы загрузки.
Восстановление после ошибки
Ошибки, возвращённые действием, отображаются в свойстве form страницы.
Оптимистичный интерфейс
Обновляйте локальное состояние в функции обратного вызова до ответа сервера, чтобы пользователь сразу видел результат.
Несколько форм
Для каждой формы можно задать собственное поведение enhance. Глобальное состояние не требуется.
Почему это важно
Одна директива сочетает надёжность HTML-форм с плавностью SPA.
Быстрая проверка
Что делает use:enhance?
Повторение
use:enhance превращает обычные формы в формы с отправкой на стороне клиента. Поведение можно настроить с помощью функции обратного вызова.
Часто задаваемые вопросы
Урок «Директива use:enhance» бесплатный?
Да — полный текст урока «Директива use:enhance» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Директива use:enhance»?
Постепенно улучшайте отправку форм с помощью fetch на стороне клиента без полной перезагрузки Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Директива use:enhance»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- +page.server.js с действиями
- Директива use:enhance
- Постепенное улучшение форм
- Обработка ошибок проверки в действиях