Dyrektywa use:enhance
Stopniowo ulepszaj wysyłanie formularzy za pomocą fetch po stronie klienta, bez pełnego przeładowania.
Dyrektywa use:enhance to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Progresywne ulepszanie
Formularze działają bez JavaScriptu; dyrektywa use:enhance ulepsza je, zamieniając wysyłanie na żądania oparte na fetch, co zapewnia płynną obsługę.
Importowanie enhance
Z pakietu $app/forms.
import { enhance } from "$app/forms";Zastosowanie do formularza
Użyj dyrektywy use: na elemencie formularza.
<form method="POST" use:enhance>...</form>Bez przeładowania
Strona nie jest przeładowywana. SvelteKit wysyła formularz za pomocą fetch, przetwarza akcję i reaktywnie aktualizuje stronę.
Niestandardowa funkcja obsługi
Przekaż funkcję zwrotną do enhance, aby precyzyjnie kontrolować wysyłanie formularza.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Zachowanie domyślne
Bez funkcji zwrotnej enhance przekierowuje lub odświeża dane dokładnie tak, jak zrobiłoby to pełne wysłanie strony.
Stan ładowania
Śledź stan wysyłania za pomocą zmiennej lokalnej w funkcji zwrotnej, aby wyświetlać animacje ładowania.
Odzyskiwanie po błędzie
Błędy zwrócone przez akcję są dostępne we właściwości form strony.
Optymistyczny interfejs
Zaktualizuj stan lokalny w funkcji zwrotnej przed odpowiedzią serwera, aby natychmiast wyświetlić rezultat.
Wiele formularzy
Każdy formularz może mieć własne zachowanie enhance. Nie jest potrzebny stan globalny.
Dlaczego ma to znaczenie
Jedna dyrektywa zapewnia odporność formularzy HTML oraz płynność aplikacji SPA.
Szybkie sprawdzenie
Co robi use:enhance?
Podsumowanie
use:enhance ulepsza natywne formularze, umożliwiając wysyłanie po stronie klienta. Zachowanie można dostosować za pomocą funkcji zwrotnej.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Dyrektywa use:enhance” jest bezpłatna?
Tak — pełny tekst „Dyrektywa use:enhance” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dyrektywa use:enhance”?
Stopniowo ulepszaj wysyłanie formularzy za pomocą fetch po stronie klienta, bez pełnego przeładowania. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Dyrektywa use:enhance”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- +page.server.js z actions
- Dyrektywa use:enhance
- Progresywne ulepszanie formularzy
- Obsługa błędów walidacji w actions