Promises - Fetch

JS

Waarom asynchroon?

Promises

  • JavaScript is single-threaded

  • Sommige taken duren lang (API ophalen, bestanden, timers)

  • De pagina mag niet blokkeren

Probleem

console.log("Code voor");


// hier stuk code dat lang duurt
// ... fetch("https://api.example.com/data") ...
//


console.log("Code na");
document.body.style.backgroundColor = "red";

"Promises"

Voordeel

  • Wachten op iets dat later klaar is

  • Geen blokkerende code

  • Mogelijkheid tot foutafhandeling

Oplossing

  • Je kan in JavaScript zelf een promise aanmaken, maar dat is al redelijk advanced en niet zo vaak nodig
  • Wel heel vaak nodig: het ophalen van data. Deze promise zit standaard in JavaScript: fetch

Promises

Fetch

Promises

  • Browserfunctie

  • Haalt data op via URL

  • Geeft een Promise terug

Wat is fetch?

fetch("https://api.example.com/data");

  • Het antwoord (response) moet omgezet worden naar JSON

  • Dataformaat

  • Lijkt op een JavaScript object

  • Wordt door bijna alle moderne API’s gebruikt

JSON

{
  "id": 1,
  "title": "Hallo wereld"
}

Voorbeeld: https://www.pgm.gent/data/emojis/emojis.json

Optie 1: then

Hoe promise gebruiken?

  • Wacht op het resultaat

  • Voert functie uit als de promise fulfilled is

  • Probleem? Catch

Then

const url = "https://www.pgm.gent/data/emojis/emojis.json";

fetch(url)
  .then(res => res.json())
  .then(data => {
        // hier alle code die we willen uitvoeren 
        // indien fetch gelukt is
        console.log(data);
   })
  .catch(err => console.error("Fout:", err));

Pro

  • Gemakkelijk te gebruiken

Con

  • Veel indenting / nesting
  • Moeilijker te lezen

 

Pro/Con

fetch("https://www.pgm.gent/data/emojis/emojis.json")
  .then(res => res.json())
  .then(data => {
        // hier alle code die we willen uitvoeren indien fetch gelukt is
        console.log(data);
   })
  .catch(err => console.error("Fout:", err));

Optie 2: async / await

Hoe promise gebruiken?

  • Nieuwere manier van async code

  • Ziet eruit als “gewone” code

  • await werkt alleen in een async functie

Async / Await

async function loadData() {
  const url = "https://www.pgm.gent/data/emojis/emojis.json";
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}
loadData();

Let op: dit is nog steeds dezelfde fetch functie als in optie 1! We gebruiken deze gewoon op een andere manier

  • Nieuwere manier van async code

  • Ziet eruit als “gewone” code

  • await werkt alleen in een async functie

Async / Await

async function loadData() {
  const url = "https://www.pgm.gent/data/emojis/emojis.json";
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}
loadData();

  • Hou ook rekening met errors via try/catch

Catch?

async function loadData() {
  try {
    const url = "https://www.pgm.gent/data/emojis/emojis.json";
  	const response = await fetch(url);
  	const data = await response.json();
  	console.log(data);
  } catch (err) {
    console.error("Fout:", err);
  }
}
loadData();

Optie 1: then                           Optie 2: async/await

Vergelijking

async function loadData() {
  try {
  	const response = await fetch(url);
  	const data = await response.json();
  	console.log(data);
  } catch (err) {
    console.error("Fout:", err);
  }
}
loadData();
fetch(url)
  .then(res => res.json())
  .then(data => {
        console.log(data);
   })
  .catch(err => console.error("Fout:", err));

Error handling

Fetch

  • fetch maakt enkel een error aan bij netwerk problemen (bv. server down, wifi niet werkend, ...)

  • Andere problemen (500, 404, ...) komen niet in catch terecht. Deze moet je zelf opvangen.

Probleem

Zelf opvangen

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {        
      // response.ok is false bij 4xx of 5xx
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("DATA:", data))
  .catch(err => console.error("ERROR:", err));

Door een Error te "throwen" binnen de promise, zal JS naar catch gaan en niet langer naar then!