Sveltejs Academy · Oppitunti

+page.js:n load-funktio

Viekää load-funktio, joka hakee tai laskee tiedot ennen sivun renderöintiä.

Oppitunti 1/413 vaihetta

+page.js:n load-funktio on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Miksi load-funktioita käytetään

SvelteKitin on tiedettävä, mitä tietoja sivusi tarvitsee, jotta se voi hakea ne ennen renderöintiä. Load-funktio tarjoaa nämä tiedot.

Tiedoston sijainti

Luokaa +page.js samaan kansioon +page.svelte-tiedoston viereen.

load-funktion vienti

Viekää load-niminen funktio.

export async function load({ params, fetch }) {
  const res = await fetch("/api/items");
  return { items: await res.json() };
}

Asynkronisuus sallittu

Load-funktiot voivat olla asynkronisia. SvelteKit odottaa niiden valmistumista ennen renderöintiä.

Palautetut tiedot

Kaikki palauttamanne välitetään sivulle data-propsina.

fetch-funktion käyttö

Käyttäkää load-funktion käyttöön annettua fetch-funktiota. Se käsittelee SSR:n ja tunnistetiedot oikein.

Parametrien käyttäminen

Dynaamisten reittien parametrit ovat käytettävissä params-arvossa.

export function load({ params }) { return { slug: params.slug }; }

Ajetaan ensin palvelimella

Ensimmäisillä pyynnöillä load suoritetaan palvelimella ja myöhemmissä navigoinneissa asiakasohjelmassa.

Universal ja vain palvelimella

+page.js suoritetaan molemmissa ympäristöissä; +page.server.js suoritetaan vain palvelimella.

Välimuisti

Käyttäkää HTTP-otsakkeita ja alustan välimuistia, jotta load-funktiot toimivat tehokkaasti.

Suoratoisto

Palauttakaa sisäkkäisissä ominaisuuksissa promiseja, jotta tiedot voidaan suoratoistaa estämättä alkuperäisen HTML:n lähettämistä.

Pikatarkistus

Mitä load palauttaa?

Kertaus

Viekää load +page.js-tiedostosta tietojen hakemista tai laskemista varten. Paluuarvosta tulee sivun data-props.

Aloita maksutta

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 ”+page.js:n load-funktio” ilmainen?

Kyllä – oppitunnin ”+page.js:n load-funktio” 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 Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”+page.js:n load-funktio”?

Viekää load-funktio, joka hakee tai laskee tiedot ennen sivun renderöintiä. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”+page.js:n load-funktio”-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ä Sveltejs Academy-oppitunnilla?

Kyllä. Jokainen Sveltejs 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

  1. +page.js:n load-funktio
  2. Tietojen palauttaminen ja $page.data-muuttujan käyttö
  3. Virheenkäsittely load-funktiossa
  4. +page.server.js palvelimella suoritettavalle logiikalle
← Takaisin: Sveltejs Academy