5.5 Asynkron programmering og API-er

Asynkron programmering og API-er

Hittil har JavaScript-koden vår kjørt synkront – instruksjon for instruksjon, fra topp til bunn. Men mange oppgaver i moderne webutvikling tar tid: hente data fra en server, laste bilder, vente på brukerinput. Hvis JavaScript måtte vente på at hver slik operasjon ble ferdig før den fortsatte, ville nettsiden fryse og bli ubrukelig.

Løsningen er asynkron programmering – en modell der tidkrevende operasjoner startes og kjører i bakgrunnen, mens resten av programmet fortsetter. Når operasjonen er ferdig, varsles programmet og kan behandle resultatet.

I dette kapittelet lærer vi om Promises, async/await og den kanskje viktigste praktiske ferdigheten i moderne JavaScript: å hente data fra API-er (Application Programming Interfaces) med fetch().

La oss se forskjellen mellom synkron og asynkron kode:

Synkron kode (blokkerende)

``javascript
console.log("Steg 1");
console.log("Steg 2"); // Venter til steg 1 er ferdig
console.log("Steg 3"); // Venter til steg 2 er ferdig
// Utskrift: Steg 1, Steg 2, Steg 3 (i rekkefølge)
`

Asynkron kode (ikke-blokkerende)

`javascript
console.log("Steg 1");

setTimeout(() => {
console.log("Steg 2 (etter 2 sekunder)");
}, 2000);

console.log("Steg 3");
// Utskrift: Steg 1, Steg 3, Steg 2 (etter 2 sek)
`

I det asynkrone eksemplet kjøres «Steg 3» før «Steg 2» fordi setTimeout er asynkron – den starter en timer i bakgrunnen og lar resten av koden kjøre videre. Når timeren utløper etter 2 sekunder, kjøres callback-funksjonen.

setTimeout` er det enkleste eksemplet på asynkron kode, men i praksis er det nettverksforespørsler (henting av data fra API-er) som er den viktigste bruken av asynkron programmering.

``javascript
fetch("https://api.eksempel.no/data")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("Feil:", error);
});
`

La oss bryte ned hva som skjer:

1. fetch(url) sender en HTTP GET-forespørsel til URL-en
2. .then(response => response.json()) tar svaret fra serveren og konverterer det fra JSON-tekst til et JavaScript-objekt
3. .then(data => { ... }) lar deg bruke de konverterte dataene
4. .catch(error => { ... }) fanger opp feil (f.eks. nettverksproblemer)

Praktisk eksempel med et ekte API

`javascript
// Hent et tilfeldig vitseriat fra et åpent API
fetch("https://official-joke-api.appspot.com/random_joke")
.then(response => response.json())
.then(joke => {
console.log(joke.setup);
console.log(joke.punchline);
})
.catch(error => {
console.error("Kunne ikke hente vits:", error);
});
``

Denne koden sender en forespørsel til et API som returnerer tilfeldige vitser i JSON-format, konverterer svaret til et JavaScript-objekt, og skriver ut oppsett og poeng.

Promise-kjeder med .then() kan bli vanskelige å lese. Moderne JavaScript tilbyr async/await som gjør asynkron kode mye enklere:

``javascript
async function hentData() {
try {
const response = await fetch("https://api.eksempel.no/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Feil:", error);
}
}

hentData();
`

Nøkkelord:
- async foran funksjonen markerer den som asynkron
- await pauser funksjonen til Promiset er fullført (kan bare brukes inne i async-funksjoner)
- try/catch håndterer feil på en oversiktlig måte

Sammenligning: .then() vs. async/await

`javascript
// Med .then() (eldre stil)
fetch("https://api.eksempel.no/brukere")
.then(response => response.json())
.then(brukere => {
console.log(brukere);
})
.catch(error => {
console.error(error);
});

// Med async/await (moderne, anbefalt)
async function hentBrukere() {
try {
const response = await fetch("https://api.eksempel.no/brukere");
const brukere = await response.json();
console.log(brukere);
} catch (error) {
console.error(error);
}
}
``

Begge gjør nøyaktig det samme, men async/await-versjonen er lettere å lese fordi den ser ut som vanlig synkron kode.

Nettverksforespørsler kan feile av mange grunner: ingen internettforbindelse, serveren er nede, feil URL, API-nøkkel er ugyldig, osv. God feilhåndtering er derfor avgjørende.

Sjekke HTTP-statuskoden

fetch() kaster bare en feil ved nettverksproblemer – den anser HTTP-feil som 404 og 500 som vellykkede forespørsler. Du må sjekke statuskoden selv:

``javascript
async function hentData(url) {
try {
const response = await fetch(url);

if (!response.ok) {
throw new Error("HTTP-feil: " + response.status);
}

const data = await response.json();
return data;

} catch (error) {
console.error("Noe gikk galt:", error.message);
return null;
}
}
`

response.ok er true for statuskoder 200-299 og false for andre. Ved å kaste en feil med throw new Error() sikrer vi at feil fanges av catch-blokken.

Vise feilmeldinger til brukeren

`javascript
async function lastInnVarsel() {
const statusDiv = document.querySelector("#status");
statusDiv.textContent = "Laster data...";

try {
const response = await fetch("https://api.met.no/weatherapi");

if (!response.ok) {
throw new Error("Kunne ikke hente værdata.");
}

const data = await response.json();
statusDiv.textContent = "";
visVardata(data);

} catch (error) {
statusDiv.textContent = "Feil: " + error.message;
statusDiv.style.color = "red";
}
}
``

Hittil har vi bare hentet data (GET). For å sende data til en server bruker vi POST-forespørsler:

``javascript
async function sendKommentar(tekst) {
try {
const response = await fetch("https://api.eksempel.no/kommentarer", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
innhold: tekst,
tidspunkt: new Date().toISOString(),
}),
});

if (!response.ok) {
throw new Error("Kunne ikke sende kommentar.");
}

const resultat = await response.json();
console.log("Kommentar lagret:", resultat);

} catch (error) {
console.error("Feil:", error.message);
}
}
`

fetch() tar et valgfritt options-objekt som andre argument:
- method: HTTP-metoden (POST, PUT, DELETE osv.)
- headers: Metainformasjon, her spesifiserer vi at vi sender JSON
- body: Selve dataene, konvertert til JSON-streng med JSON.stringify()`