Oprettelse af GET-forespørgsler
Hent data, og fortolk JSON-svar.
Oprettelse af GET-forespørgsler er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad fetch gør
Fetch API foretager HTTP-anmodninger fra browseren og returnerer et Promise. Det er den moderne erstatning for den gamle XMLHttpRequest.
En grundlæggende GET
Kald fetch(url) med en URL. Den bruger GET-metoden som standard og løses med et Response-objekt.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});Response-objektet
Den returnerede værdi er et Response-objekt, ikke selve dataene. Det indeholder status, headere og metoder til at læse indholdet. Du skal kalde en metode til læsning af indholdet for at hente det.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});Fortolkning af JSON
De fleste API'er returnerer JSON. Kald response.json(), som selv returnerer et Promise, der løses til det fortolkede objekt.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Hvorfor to Promises
Det første Promise løses, når headerne ankommer; det andet (.json()) løses, når hele indholdet er hentet og fortolket. Derfor kæder du to kald til .then() sammen.
Brug af async/await
Det meste kode bruger async/await for at gøre den lettere at læse. Hvert await sætter udførelsen på pause, indtil dets Promise er løst.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}Andre metoder til at læse indhold
Ud over json() kan et Response læses som text(), blob() (binære data), arrayBuffer() eller formData(). Vælg ud fra det, serveren returnerer.
const response = await fetch(url);
const html = await response.text(); // raw stringIndhold læses én gang
Indholdet i et svar er en datastrøm, som du kun kan forbruge én gang. Hvis du kalder json() og derefter text() på det samme svar, udløses en fejl. Klon med response.clone(), hvis du virkelig har brug for begge dele.
Forespørgselsparametre
Opret forespørgselsstrenge sikkert med URLSearchParams i stedet for at sammenkæde dem manuelt. Den koder specialtegn for dig.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);Send headere
Send et argument mere med indstillinger. Ved GET angiver du ofte en Accept-header eller et token til godkendelse.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Returnér Promisen
Indpak fetch-logikken i en funktion, der returnerer Promisen, så kaldere kan afvente den. Det gør indlæsning af data genanvendelig i hele din app.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}Hurtigt tjek
GET-anmodninger med fetch.
Opsamling
fetch(url) returnerer et Promise for et Response. Læs indholdet med json(), text() eller blob() (kun én gang). Brug async/await for tydelighed, URLSearchParams til forespørgselsstrenge og et indstillingsobjekt til headere. Indpak det i funktioner, der returnerer Promisen, så det kan genbruges.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Oprettelse af GET-forespørgsler” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Oprettelse af GET-forespørgsler”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Oprettelse af GET-forespørgsler”?
Hent data, og fortolk JSON-svar. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Oprettelse af GET-forespørgsler”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af GET-forespørgsler
- POST og afsendelse af data
- Håndtering af fejl og statuskoder
- Annullering af forespørgsler med AbortController