A diretiva use:enhance
Aprimore progressivamente os envios de formulários com fetch no lado do cliente, sem recarregar a página inteira.
A diretiva use:enhance é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Aprimoramento progressivo
Os formulários funcionam sem JS; use:enhance os transforma em envios baseados em fetch para uma experiência mais ágil.
Importar o aprimoramento
A partir de $app/forms.
import { enhance } from "$app/forms";Aplicar a um formulário
Use a diretiva use: no elemento de formulário.
<form method="POST" use:enhance>...</form>Sem recarregamento
A página não é recarregada. O SvelteKit envia o formulário por fetch, processa a ação e atualiza a página de forma reativa.
Manipulador personalizado
Passe uma função de retorno de chamada para enhance para controlar detalhadamente o envio.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Comportamento padrão
Sem uma função de retorno de chamada, enhance redireciona ou atualiza os dados exatamente como faria um envio completo da página.
Estado de carregamento
Acompanhe o estado do envio com uma variável local na função de retorno de chamada para exibir indicadores de carregamento.
Recuperação de erros
Os erros retornados pela ação aparecem na propriedade form da página.
Interface otimista
Atualize o estado local na função de retorno de chamada antes que o servidor responda para fornecer feedback imediato.
Vários formulários
Cada formulário pode ter seu próprio comportamento de aprimoramento. Nenhum estado global é necessário.
Por que isso importa
Você obtém a resiliência dos formulários HTML e a fluidez de uma SPA em uma única diretiva.
Verificação rápida
O que use:enhance faz?
Recapitulação
use:enhance transforma formulários nativos em envios no cliente. Personalize o comportamento por meio de uma função de retorno de chamada.
Perguntas Frequentes
A aula “A diretiva use:enhance” é grátis?
Sim — o texto completo de “A diretiva use:enhance” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “A diretiva use:enhance”?
Aprimore progressivamente os envios de formulários com fetch no lado do cliente, sem recarregar a página inteira. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “A diretiva use:enhance”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- +page.server.js com ações
- A diretiva use:enhance
- Aprimoramento progressivo para formulários
- Tratando erros de validação em ações