La direttiva use:enhance
Migliori progressivamente l'invio dei form con fetch lato client, senza ricaricare completamente la pagina.
La direttiva use:enhance è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Progressive enhancement
I moduli funzionano senza JavaScript; use:enhance li trasforma in invii basati su fetch, per un'esperienza più reattiva.
Importazione di enhance
Da $app/forms.
import { enhance } from "$app/forms";Applicazione a un modulo
Utilizzi la direttiva use: sull'elemento del modulo.
<form method="POST" use:enhance>...</form>Nessun ricaricamento
La pagina non viene ricaricata. SvelteKit invia il modulo tramite fetch, elabora l'azione e aggiorna la pagina in modo reattivo.
Gestore personalizzato
Passi un callback a enhance per controllare nei dettagli l'invio.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Comportamento predefinito
Senza callback, enhance reindirizza o aggiorna i dati esattamente come farebbe l'invio di una pagina completa.
Stato di caricamento
Per visualizzare gli spinner, tenga traccia dello stato dell'invio con una variabile locale nel callback.
Recupero dagli errori
Gli errori restituiti dall'azione vengono esposti nella prop form della pagina.
Interfaccia ottimistica
Aggiorni lo stato locale nel callback prima della risposta del server, per fornire un riscontro immediato.
Più moduli
Ogni modulo può avere un comportamento enhance personalizzato. Non è necessario alcuno stato globale.
Perché è importante
Con una sola direttiva ottiene la solidità dei moduli HTML e la fluidità di una SPA.
Verifica rapida
Che cosa fa use:enhance?
Riepilogo
use:enhance trasforma i moduli nativi in invii lato client. Lo personalizzi tramite un callback.
Domande Frequenti
La lezione «La direttiva use:enhance» è gratuita?
Sì — il testo completo di «La direttiva use:enhance» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «La direttiva use:enhance»?
Migliori progressivamente l'invio dei form con fetch lato client, senza ricaricare completamente la pagina. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «La direttiva use:enhance»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- +page.server.js con le actions
- La direttiva use:enhance
- Progressive enhancement dei form
- Gestione degli errori di validazione nelle actions