5.5 Asynkron programmering og API-er

Sider som ikke fryser

Så langt har JavaScript-koden vår kjørt synkront – instruksjon for instruksjon, fra topp til bunn. Men mange oppgaver tar tid: å hente data fra en server, laste bilder, vente på input. Måtte JavaScript vente på at hver slik operasjon ble ferdig, ville siden fryse og bli ubrukelig.

Løsningen er asynkron programmering – tidkrevende operasjoner startes og kjører i bakgrunnen mens resten av programmet fortsetter. Når operasjonen er ferdig, varsles programmet og kan behandle resultatet. Forskjellen ser du tydelig i et eksempel:

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

Dette skriver ut A, C, B – ikke A, B, C. Selv med en forsinkelse på 0 er setTimeout asynkron: den starter en timer i bakgrunnen og lar resten av koden kjøre videre, så «B» kommer sist. setTimeout er det enkleste eksemplet, men i praksis er det nettverksforespørsler som er den viktigste bruken.

Det leder oss til API-er (Application Programming Interfaces) – grensesnitt som lar programmer kommunisere etter bestemte regler. Web-API-er leverer data over internett via HTTP, vanligvis i JSON-format. Når JavaScript henter værdata, kart eller nyheter fra en ekstern tjeneste, snakker det med et API.

fetch, Promises og async/await

Den innebygde funksjonen for å sende HTTP-forespørsler heter fetch(). Den er asynkron og returnerer et Promise – et objekt som representerer det fremtidige resultatet av en asynkron operasjon, et «løfte» om data senere. Et Promise har tre tilstander: pending (i gang), fulfilled (lyktes) eller rejected (feilet). Du håndterer utfallet med .then() for suksess og .catch() for feil:

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

Her sender fetch en GET-forespørsel, .then(response => response.json()) konverterer serverens JSON-tekst til et JavaScript-objekt, neste .then bruker dataene, og .catch fanger feil. Metoden response.json() gjør altså om svaret fra JSON-tekst til et objekt du kan jobbe med.

Lange .then()-kjeder kan bli vanskelige å lese. Derfor finnes async/await, som lar asynkron kode se ut som vanlig synkron kode:

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);
  }
}

Nøkkelordet async foran funksjonen markerer den som asynkron, await pauser funksjonen til Promiset er fullført (og kan bare brukes inni en async-funksjon), og try/catch håndterer feil ryddig. De to skrivemåtene gjør nøyaktig det samme, men async/await er lettere å lese og anbefales.

Når ting går galt – og å sende data

Nettverksforespørsler kan feile av mange grunner: ingen forbindelse, serveren er nede, feil URL. God feilhåndtering er derfor avgjørende, og her er en felle mange går i. fetch() kaster bare en feil ved nettverksproblemer – den anser HTTP-feil som 404 (Ikke funnet) og 500 som vellykkede forespørsler. Du må derfor sjekke statuskoden selv:

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

response.ok er true for statuskoder mellom 200 og 299, og false ellers. Ved å kaste en feil med throw new Error() sikrer du at den fanges av catch-blokken. I praksis bør du også vise tydelige feilmeldinger til brukeren – for eksempel «Laster data...» mens forespørselen pågår, og en rød feilmelding hvis noe går galt.

Så langt har vi bare hentet data med GET. For å sende data bruker du en POST-forespørsel, der fetch() tar et options-objekt som andre argument:

await fetch("https://api.eksempel.no/kommentarer", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ innhold: tekst })
});

Her er method HTTP-metoden (POST), headers forteller at vi sender JSON, og body er selve dataene – konvertert til en JSON-streng med JSON.stringify(). Med GET for å hente og POST for å sende kan JavaScript-en din kommunisere fritt med servere og bygge fullverdige nettapplikasjoner.

Oppsummering

Asynkron programmering hindrer nettsider i å fryse. Mens synkron kode kjører i rekkefølge, lar asynkron kode tidkrevende operasjoner kjøre i bakgrunnen – som vi så da setTimeout med 0 ms likevel kom sist.

Du henter data fra API-er med fetch(), som returnerer et Promise (pending, fulfilled eller rejected). response.json() gjør svaret om til et objekt. Den moderne, lesbare måten er async/await med try/catch. Husk at fetch() ikke kaster feil for HTTP-koder som 404 – sjekk response.ok selv. Og med POST-forespørsler og JSON.stringify() kan du sende data til serveren. Med dette behersker du datakommunikasjonen som driver moderne nettapplikasjoner.