La directiva use:enhance
Mejore progresivamente los envíos de formularios con fetch en el cliente, sin recargar toda la página
La directiva use:enhance es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Mejora progresiva
Los formularios funcionan sin JS; use:enhance los mejora para enviar datos mediante fetch y ofrecer una experiencia más ágil.
Importar enhance
Desde $app/forms.
import { enhance } from "$app/forms";Aplicarlo a un formulario
Utilice la directiva use: en el elemento del formulario.
<form method="POST" use:enhance>...</form>Sin recarga
La página no se recarga. SvelteKit envía el formulario mediante fetch, procesa la acción y actualiza la página de forma reactiva.
Controlador personalizado
Pase una función de callback a enhance para controlar con precisión el envío.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Comportamiento predeterminado
Sin un callback, enhance redirige o actualiza los datos exactamente como lo haría un envío de página completo.
Estado de carga
Realice el seguimiento del estado del envío con una variable local en el callback para mostrar indicadores de carga.
Recuperación de errores
Los errores devueltos por la acción aparecen en la propiedad form de la página.
Interfaz de usuario optimista
Actualice el estado local en el callback antes de que responda el servidor para ofrecer una respuesta inmediata.
Varios formularios
Cada formulario puede tener su propio comportamiento de enhance. No necesita un estado global.
Por qué es importante
Obtiene la resiliencia de los formularios HTML y la fluidez de una SPA en una sola directiva.
Comprobación rápida
¿Qué hace use:enhance?
Resumen
use:enhance mejora los formularios nativos para enviarlos desde el cliente. Puede personalizarlo mediante un callback.
Preguntas frecuentes
¿La lección «La directiva use:enhance» es gratis?
Sí — el texto completo de «La directiva use:enhance» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «La directiva use:enhance»?
Mejore progresivamente los envíos de formularios con fetch en el cliente, sin recargar toda la página Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «La directiva use:enhance»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- +page.server.js con actions
- La directiva use:enhance
- Mejora progresiva de formularios
- Gestión de errores de validación en actions