Ga naar de hoofdinhoud

5. Fetch & promises

15-11-2024Ongeveer 4 minutenOngeveer 644 woorden

5. Fetch & promises

In deze oefeningenreeks oefen je op:

  • Het manipuleren van de DOM
  • Het gebruik fetch
  • Het werken met promises
  • Het gebruik van asynchrone functies

Voor deze oefeningen zijn startbestanden voorzien, je vindt deze op GitPub.

Startbestanden

Oefening 1

Maak gebruik van de JSON Placeholder API om een lijst van users te tonen. Gebruik deze gegevens om een unordered-list van gebruikers te tonen.

Oefening 1
Figuur 0: Oefening 1

Breid bovenstaande oefening uit zodat een user highlighted wordt als je er met je muis over beweegt. Natuurlijk moet deze highlighting wel terug ongedaan gemaakt worden als de muis niet meer over de user beweegt.

Figuur 0: Oefening 1 met highlighting

Oefening 2

Maak gebruik van de Star Wars API om de personages uit de Star Wars films te tonen. Toon deze personages aan de hand van een Bootstrap list group. Het is voldoende als je enkele de eerste pagina (10 personages) toont.

Info

De Star Wars API's worden gratis gehost door vrijwilligers en kunnen soms onbereikbaar zijn. Als bovenstaande API offline is kan je https://swapi-api.hbtn.io/ als alternatief gebruiken.

De structuur en data is identiek voor beide API's.

Toon de naam van het personage en het gender als dit niet 'n/a' is.

Oefening 1
Figuur 0: Oefening 1

Zorgt voor foutafhandeling, als het request mislukt, moet er een gepaste boodschap getoond worden in de div met het id error-message. Hiervoor moet je de 'd-none' klasse nog programmatorisch verwijderen van de div. Je kan dit bijvoorbeeld testen door de URL te wijzigen naar "https://swapi.dev/api/peoooooople/".

Oefening 2
Figuur 0: Oefening 2

Oefening 3

Maak een webpagina waarmee je (random) afbeeldingen kan ophalen van https://picsum.photos/. Je haalt ene lijst van 25 afbeeldingen, filtert deze zodat enkel de liggende (landscape) afbeeldingen overblijven en toont deze op de pagina.

Als de pagina opstart wordt een spinner getoond (al beschikbaar in de startbestanden). Deze spinner moet verborgen worden als alle data ingeladen is uit de API. Aangezien dit resultaat heel snel geladen is, zie je de spinner misschien niet. Voeg een artificiële timeout toe van 2 seconden om voordat het request naar de API gestuurd wordt. Ga in lesvoorbeeld 5 kijken als je niet weet hoe je dit kunt doen. Om de spinner onzichtbaar te maken kan je het hidden attribuut op true zetten.

Gebruik de markup (HTML) uit de opgave om een overzicht van de afbeeldingen te tonen.

Figuur 0: Oefening 3

Extra

Hieronder vind je een aantal gratis APIs. Kies er eentje uit die je interesseert (of zoek zelf eentje online) en maak een simpele pagina die:

  • Met fetch gegevens ophaalt
  • Deze toont in een zelf gekozen control

Doe er gerust iets grappig mee, speel er eens mee om te zien wat je allemaal kan.

APIs:

Laatst bijgewerkt:
Bijdragers: Sebastiaan Henau,Evelien Van Dingenen