Data ophalen met fetch

Wat is het?

fetch stuurt een HTTP-verzoek naar een server en geeft een Promise terug. Je verwerkt het resultaat met .then(...).catch(...) of met async/await.

Waarom gebruiken we dit?

• Data laden van een API (bijv. weer, films, kaarten)
• Data opsturen (POST) naar je eigen backend

Basispatroon (GET + JSON)

fetch("https://example.com/api/data")
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    return res.json()
  })
  .then(data => {
    console.log("Data:", data)
    // hier ga je iets doen met data (bijv. DOM updaten)
  })
  .catch(err => {
    console.error("Fout bij ophalen:", err)
  })

Met headers

fetch("https://example.com/api/data", {
    method: "GET",
    headers: {
        "Authorization": "Bearer jouwToken", // Wat je exact nodig hebt staat in documentatie
        "Accept": "application/json"
    }
})
.then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    return res.json()
})
.then(data => {
    console.log("Data met headers:", data)
})
.catch(err => {
    console.error("Fout:", err)
})

Met async/await (zelfde logica, andere stijl)

async function laadData() {
  try {
    const res = await fetch("https://example.com/api/data")
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const data = await res.json()
    console.log("Data:", data)
  } catch (err) {
    console.error("Fout:", err)
  }
}
laadData()

POST-verzoek (JSON sturen)

async function stuurScore(score) {
  try {
    const res = await fetch("https://example.com/api/scores", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ score })
    })
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const result = await res.json()
    console.log("Server antwoord:", result)
  } catch (err) {
    console.error("POST fout:", err)
  }
}

Foutafhandeling (belangrijk!)

• Check res.ok vóór je res.json() doet.
• Gebruik try/catch of .catch(...).
• Toon in de UI een vriendelijke foutmelding.

CORS (Cross-Origin Resource Sharing)

CORS is een beveiligingsmechanisme in de browser. Het bepaalt of je van een andere domeinnaam data mag ophalen met JavaScript.

Voorbeeld: je website draait op mijnsite.nl, maar je haalt data op van api.andersedomein.com. Als de server van dat andere domein niet expliciet toestaat dat jouw site data ophaalt, blokkeert de browser dit.

Dit voorkomt dat kwaadwillende websites zomaar data kunnen ophalen van andere servers.

Hoe oplossen?

• Server instellen: de server moet de juiste headers (Access-Control-Allow-Origin) meesturen.
• Eigen backend/proxy: vaak maak je een eigen server die het verzoek doorstuurt.
• Andere API zoeken