Tietojen hakeminen komponentin alustuksessa
Hae JSON-tietoja API:sta useEffectin sisällä, tallenna vastaus tilaan ja käynnistä haku vain kerran tyhjällä riippuvuustaulukolla
Tietojen hakeminen komponentin alustuksessa on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Tietojen hakemisen toimintamalli
Reactin tavanomainen tietojen hakemisen toimintamalli on seuraava: 1) määritelkää loading-, error- ja data-tila, 2) hakekaa tiedot useEffectissa tyhjällä riippuvuustaulukolla [], 3) päivittäkää tila callbackissa, 4) renderöikää tila-arvon perusteella.
Kokonainen esimerkki
Kokonainen esimerkki käyttäjien hakemisesta mountauksen yhteydessä sekä latauksen ja virheiden käsittelystä.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}async/awaitin käyttäminen useEffectissa
useEffectin callbackia ei voi tehdä suoraan asynciksi, koska se palauttaisi Promisen, jonka React tulkitsisi siivousfunktioksi. Määritelkää sen sijaan sisäinen async-funktio ja kutsukaa sitä heti.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Vastaustilan tarkistaminen
fetch ei heitä poikkeusta HTTP-virheistä (4xx, 5xx), vaan ainoastaan verkkovirheistä. Tarkistakaa aina response.ok ja heittäkää virhevastauksille poikkeus itse.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Tietojen hakeminen riippuvuuden muuttuessa
Lisätkää riippuvuus, kuten reittiparametreista tai propseista saatu tunniste, efektin riippuvuustaulukkoon. Efekti suoritetaan uudelleen ja tiedot haetaan uudelleen aina, kun riippuvuus muuttuu.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);POST-pyynnöt efekteissä
Efektit voivat myös lähettää POST/PUT/DELETE-pyyntöjä, mutta yleensä nämä käynnistetään tapahtumista, kuten lomakkeen lähetyksestä tai painikkeen napsautuksesta, ei mountauksen yhteydessä suoritettavista efekteistä. Pitäkää efektit tietojen lataamista varten ja käyttäkää tapahtumankäsittelijöitä muutoksiin.
Mukautettu useFetch-hook
Irrottakaa fetch-, loading- ja error-toimintamalli mukautetuksi hookiksi, jotta voitte käyttää sitä uudelleen eri komponenteissa.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}JSON-tietojen turvallinen jäsentäminen
Ympäröikää res.json() aina try/catch-rakenteella, sillä virheellinen JSON aiheuttaa SyntaxError-poikkeuksen. Ulompi catch käsittelee sen, mutta lähteen tunteminen helpottaa virheen selvittämistä.
API:n perusosoitteen määritys
Älkää kovakoodatko API-osoitteita. Käyttäkää perusosoitteeseen ympäristömuuttujia (import.meta.env.VITE_API_URL). Luokaa keskitetty api.ts-tiedosto, joka sisältää määritetyillä asetuksilla toimivan fetch-kääreen.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Milloin kannattaa siirtyä React Queryyn
Manuaaliset fetch-toimintamallit sopivat yksinkertaisiin tilanteisiin. Kun tarvitsette välimuistia, taustalla tapahtuvaa uudelleenlatausta, sivutusta tai muutoksia, siirtykää React Queryyn (TanStack Query). Se käsittelee kaikki nämä toimintamallit luotettavasti.
Latausskeletonin näyttäminen
Näyttäkää spinnerin sijaan ladatun sisällön muotoa vastaava skeleton-käyttöliittymä. Tämä lyhentää koettua latausaikaa ja estää asettelun siirtymistä.
Pikatarkistus
Miksi useEffectin callbackia ei voi tehdä suoraan asynciksi?
Kertaus: tietojen hakeminen useEffectissa
Määritelkää loading-, error- ja data-tila. Hakekaa tiedot useEffectissa tyhjällä riippuvuustaulukolla []. Määritelkää sisäinen async-funktio älkääkä tehkö callbackista asyncia. Tarkistakaa aina res.ok. Lisätkää URL tai tunniste riippuvuuksiin dynaamista tietojen hakua varten. Irrottakaa toimintamalli uudelleenkäytettäväksi useFetch-hookiksi. Harkitkaa TanStack Querya tuotantokäyttöön tarkoitettuun tietojen hakuun.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Tietojen hakeminen komponentin alustuksessa” ilmainen?
Kyllä – oppitunnin ”Tietojen hakeminen komponentin alustuksessa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tietojen hakeminen komponentin alustuksessa”?
Hae JSON-tietoja API:sta useEffectin sisällä, tallenna vastaus tilaan ja käynnistä haku vain kerran tyhjällä riippuvuustaulukolla Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Tietojen hakeminen komponentin alustuksessa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- useEffectin perusteet: riippuvuudet ja siivous
- Tietojen hakeminen komponentin alustuksessa
- Lataus- ja virhetilojen käsittely
- AbortController siivousta varten