La directive use:enhance
Améliorez progressivement les envois de formulaires avec une récupération côté client, sans rechargement complet.
La directive use:enhance est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Amélioration progressive
Les formulaires fonctionnent sans JS ; use:enhance les améliore en utilisant des envois fondés sur fetch pour une expérience plus réactive.
Importer la fonction d’amélioration
Depuis $app/forms.
import { enhance } from "$app/forms";Appliquer à un formulaire
Utilisez la directive use: sur l’élément de formulaire.
<form method="POST" use:enhance>...</form>Sans rechargement
La page ne se recharge pas. SvelteKit envoie la requête avec fetch, traite l’action, puis met la page à jour de manière réactive.
Gestionnaire personnalisé
Transmettez une fonction de rappel à enhance pour contrôler précisément l’envoi.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Comportement par défaut
Sans fonction de rappel, enhance redirige ou actualise les données exactement comme le ferait un envoi complet de la page.
État de chargement
Suivez l’état de l’envoi avec une variable locale dans la fonction de rappel pour afficher des indicateurs de chargement.
Récupération après une erreur
Les erreurs renvoyées par l’action apparaissent dans la prop form de la page.
Interface optimiste
Mettez à jour l’état local dans la fonction de rappel avant la réponse du serveur pour fournir un retour immédiat.
Formulaires multiples
Chaque formulaire peut avoir son propre comportement d’amélioration. Aucun état global n’est nécessaire.
Pourquoi c’est important
Vous bénéficiez à la fois de la robustesse des formulaires HTML et de la fluidité d’une SPA, avec une seule directive.
Vérification rapide
Que fait use:enhance ?
Récapitulatif
use:enhance transforme les formulaires natifs en envois côté client. Personnalisez son comportement avec une fonction de rappel.
Questions Fréquemment Posées
La leçon « La directive use:enhance » est-elle gratuite ?
Oui — le texte complet de « La directive use:enhance » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « La directive use:enhance » ?
Améliorez progressivement les envois de formulaires avec une récupération côté client, sans rechargement complet. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « La directive use:enhance » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- +page.server.js avec des actions
- La directive use:enhance
- Amélioration progressive des formulaires
- Gérer les erreurs de validation dans les actions