5.5 Asynkron programmering og API-er

Asynkron programmering og API-ar

Hittil har JavaScript-koden vår køyrt synkront – instruksjon for instruksjon, frå topp til botn. Men mange oppgåver i moderne webutvikling tek tid: hente data frå ein tenar, laste bilete, vente på brukarinput. Viss JavaScript måtte vente på at kvar slik operasjon vart ferdig før han heldt fram, ville nettsida fryse og bli ubrukeleg.

Løysinga er asynkron programmering – ein modell der tidkrevjande operasjonar vert starta og køyrer i bakgrunnen, medan resten av programmet held fram. Når operasjonen er ferdig, vert programmet varsla og kan handsame resultatet.

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

Lat oss sjå skilnaden mellom synkron og asynkron kode:

Synkron kode (blokkerande)

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)

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 dømet vert «Steg 3» køyrt før «Steg 2» fordi setTimeout er asynkron – han startar ein timar i bakgrunnen og lèt resten av koden køyre vidare. Når timaren går ut etter 2 sekund, vert callback-funksjonen køyrd.

setTimeout er det enklaste dømet på asynkron kode, men i praksis er det nettverksførespurnader (henting av data frå API-ar) som er den viktigaste bruken av asynkron programmering.

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

Lat oss bryte ned kva som skjer:

1. fetch(url) sender ein HTTP GET-førespurnad til URL-en
2. .then(response => response.json()) tek svaret frå tenaren og konverterer det frå JSON-tekst til eit JavaScript-objekt
3. .then(data => { ... }) lèt deg bruke dei konverterte dataene
4. .catch(error => { ... }) fangar opp feil (f.eks. nettverksproblem)

Praktisk døme med eit ekte API

// 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 ein førespurnad til eit API som returnerer tilfeldige vitsar i JSON-format, konverterer svaret til eit JavaScript-objekt, og skriv ut oppsett og poeng.

Promise-kjeder med .then() kan bli vanskelege å lese. Moderne JavaScript tilbyr async/await som gjer asynkron kode mykje enklare:

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 framfor funksjonen markerer han som asynkron
- await pausar funksjonen til Promiset er fullført (kan berre brukast inne i async-funksjonar)
- try/catch handterer feil på ein oversiktleg måte

Samanlikning: .then() vs. async/await

// 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 gjer nøyaktig det same, men async/await-versjonen er lettare å lese fordi han ser ut som vanleg synkron kode.

Nettverksførespurnader kan feile av mange grunnar: inga internettforbinding, tenaren er nede, feil URL, API-nøkkel er ugyldig, osv. God feilhandtering er difor avgjerande.

Sjekke HTTP-statuskoden

fetch() kastar berre ein feil ved nettverksproblem – han reknar HTTP-feil som 404 og 500 som vellukka førespurnader. Du må sjekke statuskoden sjølv:

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 statuskodar 200-299 og false for andre. Ved å kaste ein feil med throw new Error() sikrar vi at feil vert fanga av catch-blokka.

Vise feilmeldingar til brukaren

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 berre henta data (GET). For å sende data til ein tenar brukar vi POST-førespurnader:

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() tek eit valfritt options-objekt som andre argument:
- method: HTTP-metoden (POST, PUT, DELETE osv.)
- headers: Metainformasjon, her spesifiserer vi at vi sender JSON
- body: Sjølve dataene, konvertert til JSON-streng med JSON.stringify()

Oppsummering

I dette kapittelet har du lært:

- Asynkron programmering: operasjonar utan å blokkere koden.
- API: grensesnitt som lèt program kommunisere.
- fetch(): hentar data frå eksterne API-ar.
- Promise: representerer eit framtidig resultat.
- async/await: moderne, lesbar syntaks for asynkron kode.

Nøkkelomgrep