fetch - hent data fra et API

Formen, du skal kunne udenad#

Næsten alle API-kald i første semester ser sådan her ud:

async function hentData() {
  const svar = await fetch("https://eksempel.dk/api/data");

  if (!svar.ok) {
    throw new Error("Serveren svarede " + svar.status);
  }

  const data = await svar.json();
  return data;
}

Fire linjer, fire ting:

1. fetch(adresse) sender forespørgslen. await venter på, at svaret kommer.
2. svar.ok er true, hvis statuskoden er i 200-serien. Tjek den, fetch kaster nemlig ikke selv en fejl ved 404 eller 500.
3. svar.json() læser indholdet og fortolker det som JSON. Den tager også tid, så også await.
4. Nu har du et almindeligt objekt eller array, du kan arbejde med.

To gange await, og hvorfor#

Det forvirrer næsten alle: hvorfor skal der ventes to gange? Fordi der er to adskilte ting, der tager tid. Først skal serveren svare. Det er den første. Så skal svarets indhold læses færdigt og fortolkes. Det er den anden.

Glemmer du den anden, får du et promise i stedet for dine data, og alt hvad du prøver at læse ud af det, bliver undefined.

Simulering, du kan køre her#

Der er ikke netadgang i eksempelfeltet her på siden, så nedenstående efterligner et svar. Formen er den samme som i din opgave.

function hentLigesomFetch() {
const jsonTekst = '{"by":"København","temp":17.4}';
return new Promise((indfri) => {
  setTimeout(() => indfri({ ok: true, status: 200, json: () => JSON.parse(jsonTekst) }), 300);
});
}

async function vis() {
try {
  const svar = await hentLigesomFetch();
  if (!svar.ok) {
    throw new Error("Serveren svarede " + svar.status);
  }
  const data = await svar.json();
  console.log("Det er " + data.temp + " grader i " + data.by);
} catch (fejl) {
  console.log("Noget gik galt: " + fejl.message);
}
}

vis();

Tryk på “Kør koden”.

At sende data den anden vej#

Skal du sende noget, typisk indholdet af en formular, giver du fetch et ekstra objekt med metode, headers og indhold:

const svar = await fetch("https://eksempel.dk/api/studerende", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ navn: "Ida", alder: 21 })
});

body skal være tekst, ikke et objekt. Derfor JSON.stringify. Og Content-Type fortæller serveren, hvordan den skal læse teksten. Mere om metoderne under HTTP.

CORS-fejlen#

Prøver du at hente fra et andet domæne, end din side kører på, kan browseren blokere det med en besked om CORS. Det er ikke en fejl i din kode: serveren i den anden ende har ikke givet lov til, at netop din side læser dens svar. Løsningen ligger hos den server, eller i at bruge et API, der tillader det.

Kort opsamling#

• await fetch(...), tjek svar.ok, await svar.json().
• To await fordi to ting tager tid.
• fetch kaster ikke fejl ved 404 og 500.
• Send data med method, headers og en body, der er tekst.