Fetch

Fetch API

API

  • Application Programming Interface
  • Verzameling van functies en methodes
  • Zorgt dat verschillende programma's met elkaar kunnen praten

Fetch API

  • Manier om data van een andere website op te halen
  • Lees er alles over op MDN 
fetch("https://example.com/data")

💡 fetch() maakt een verzoek naar de opgegeven url om data terug te krijgen

Use cases

  • 🔎 Zoekfunctie in een webshop die verbonden is met een database van producten
  • ⚽️ Live voetbaluitslagen van het WK op een nieuwswebsite
  • 🗺️ Locaties ophalen en markeren op een interactieve kaart met Google Maps API

🕰️ Fetch is asynchroon

  • Fetch maakt een belofte of Promise: Er zal iets komen, maar het is nog niet duidelijk wanneer
  • Andere code mag gewoon worden uitgevoerd

​🧑‍🍳 Zoals eten bestellen op restaurant: je vraagt iets aan de ober (=API) en wacht tot het eten (= response) geleverd wordt. Ondertussen babbel je met het gezelschap en drink je van je drankje.

Data in JSON formaat

Voorbeeld

www.reddit.com/.json 

JSON

JSON

  • = JavaScript Object Notation
  • Formaat voor data dat makkelijk uitwisselbaar & taalonafhankelijk is
  • Lijkt op JavaScript objecten
  • Fetch geeft JSON terug
{
  "key": "value"
}

JSON vs. JavaScript

{
  "name": "Olga",
  "age": 22,
  "hobbies": ["tekenen", "gamen"]
}

JSON

const persoon = {
  name: "Olga",
  age: 22,
  hobbies: ["tekenen", "gamen"]
};

JavaScript

JSON vs. JavaScript

[
  {
    "name": "Lisa",
    "age": 22,
    "hobbies": ["lezen", "schilderen"]
  },
  {
    "name": "Tom",
    "age": 28,
    "hobbies": ["gamen", "hiken"]
  }
]

JSON

JSON vs. JavaScript

const personen = [
  {
    name: "Lisa",
    age: 22,
    hobbies: ["lezen", "schilderen"]
  },
  {
    name: "Tom",
    age: 28,
    hobbies: ["gamen", "hiken"]
  }
];

JavaScript

JSON vs. JavaScript

  • Lijkt op elkaar, maar is niet hetzelfde
    • JSON-object = tekst
    • JavaScript-object = direct bruikbare variabele
  • JSON kan ook in andere programmeertalen gebruikt worden (Python, PHP,...)
     

➡️ Gebruikt .json() bij Fetch om JSON om te zetten naar een JavaScript-object

Gefetchte data gebruiken

📦 Vergelijking: Een pakketje bestellen

  1. Je plaatst een bestelling 

  2. Vervolgstappen:

    • 1️⃣ Nadat het pakket is bezorgd, open je de doos.

    • 2️⃣ Daarna haal je het product uit de doos.

    • 3️⃣ Als er iets misgaat, volg je een plan B (pakket kwijt, product beschadigd,...)

📦 Vergelijking: Een pakketje bestellen

fetch("https://www.zalando.com/api/pakketje")
  .then(response => {
  	// Open pakket / zet JSON om
    return response.json(); 
  })

1️⃣

📦 Vergelijking: Een pakketje bestellen

fetch("https://www.zalando.com/api/pakketje")
  .then(response => {
  	// Open pakket / zet JSON om
    return response.json(); 
  })
  .then(data => {
  	// Haal uit doos / log in de console
    console.log(data); 
  })

1️⃣

2️⃣

📦 Vergelijking: Een pakketje bestellen

fetch("https://www.zalando.com/api/pakketje")
  .then(response => {
  	// Open pakket / zet JSON om
    return response.json(); 
  })
  .then(data => {
  	// Haal uit doos / log in de console
    console.log(data); 
  })
  .catch(error => {
    console.error("Er is iets misgegaan!", error);
  });

1️⃣

2️⃣

3️⃣

Data consumeren

  • fetch() werkt asynchroon: Het duurt even voordat het antwoord binnen is

  • .then(): "Als het antwoord binnenkomt, doe dan dit."

  • .json() zet de ontvangen data om van JSON-tekst naar een JavaScript-object

Then, then, then,...

  • .then() handelt asynchrone fetch-requests af

  • .catch() handelt mogelijke errors af

  • Kan ingewikkeld worden

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Er ging iets mis:'));

Oplossing

✨ Async/Await ✨

Async/Await

Async functions

  • Maken asynchrone code leesbaarder
  • async keyword geeft aan dat de code op een resultaat wacht
  • await keyword pauzeert code tot de Promise afgehandeld is
  • try/catch probeert code uit te voeren en handelt errors af indien er zijn

async keyword

  • Wordt voor een functie geplaatst:
    async function mijnFunctie() {}
  • Zorgt ervoor dat de functie een Promise returnt
async function haalDataOp() {
  // Code hier
}

await keyword

  • Kan alleen binnen een async functie gebruikt worden
  • Pauzeert de uitvoering tot de Promise is opgelost
  • Geen .then() nodig
async function haalDataOp() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
}

try/catch block

  • Manier om fouten af te handelen in JavaScript
  • Probeer code uit met try {}
  • Vang fouten met catch {} 
const myUrl = "https://example.com/data";

try {
  const response = await fetch(myUrl);
} catch (error) {
  console.error('Er ging iets mis:', error);
}
async function haalDataOp() {
  try {
    const response = await fetch(myUrl);
    const data = await response.json();
    verwerkData(data);
  } catch (error) {
    console.error(error);
  }
}

Async/await