# Callback-functies

Schrijf een functie genaamd calculateSquare die een getal als argument neemt en een callback-functie gebruikt om het kwadraat van dat getal te berekenen en af te drukken.

function calculateSquare(number, callback) {
  // Jouw code hier
}

1
2
3

# Callback Hell vermijden

Herschrijf de volgende code zonder gebruik te maken van callback hell, gebruikmakend van aparte functies en promises.

function fetchData(callback) {
  // ...
}

function processData(data, callback) {
  // ...
}

function displayResult(result) {
  // ...
}

fetchData((data) => {
  processData(data, (processedData) => {
    displayResult(processedData);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Promise met foutafhandeling

Schrijf een functie genaamd fetchDataWithPromise die een Promise teruggeeft die na 2 seconden wordt opgelost met de tekst “Gegevens opgehaald” en een kans van 30% heeft om te worden afgewezen met de fout “Fout bij ophalen van gegevens”.

function fetchDataWithPromise() {
  // Jouw code hier
}

1
2
3

# Promise chaining

Schrijf twee functies, fetchUserData en fetchUserPosts, die beide Promises teruggeven voor het ophalen van gebruikersgegevens en gebruikersposts. Gebruik Promise chaining om deze functies te verbinden en toon het resultaat.

function fetchUserData(userId) {
  // Jouw code hier
}

function fetchUserPosts(user) {
  // Jouw code hier
}

1
2
3
4
5
6
7

# Parallelle uitvoering van Promises

Gebruik Promise.all() om gelijktijdig gegevens op te halen van twee verschillende URL’s. Toon het resultaat als beide Promises zijn vervuld.

const fetchData = (url) => {
  // Jouw code hier
};

const promise1 = fetchData("URL1");
const promise2 = fetchData("URL2");

Promise.all([promise1, promise2])
  .then((results) => {
    // Jouw code hier
  })
  .catch((error) => {
    // Jouw code hier
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Excelleren

# Async/Await met foutafhandeling

Schrijf een async functie genaamd processDataWithAsyncAwait die gebruikmaakt van fetchDataWithPromise (uit oefening 3) met async/await en foutafhandeling om de gegevens op te halen en het resultaat weer te geven.

async function processDataWithAsyncAwait() {
  // Jouw code hier
}

1
2
3

# Async/Await met Promise.all()

Schrijf een async functie genaamd fetchMultipleData die gebruikmaakt van fetchDataWithPromise (uit oefening 3) om gegevens op te halen van meerdere URL’s tegelijkertijd met behulp van Promise.all(). Toon het resultaat.

async function fetchMultipleData() {
  // Jouw code hier
}

1
2
3

# Async/Await met sequentiële uitvoering

Schrijf een async functie genaamd fetchSequentialData die gebruikmaakt van fetchDataWithPromise (uit oefening 3) om gegevens op te halen van verschillende URL’s één voor één met een vertraging van 2 seconden tussen elke aanroep. Toon het resultaat.

async function fetchSequentialData() {
  // Jouw code hier
}

1
2
3

# Promise.race() met async/await

Schrijf een async functie genaamd fetchRaceData die gebruikmaakt van fetchDataWithPromise (uit oefening 3) om gegevens op te halen van verschillende URL’s en de data van de eerste vervulde Promise weergeeft met behulp van Promise.race().

async function fetchRaceData() {
  // Jouw code hier
}

1
2
3

# Async/Await met externe API

Gebruik fetch en async/await om gegevens op te halen van de JSONPlaceholder API. Haal gegevens op van de gebruiker met ID 1 en toon het resultaat.

async function fetchDataFromAPI() {
  // Jouw code hier
}

1
2
3

# Fetch met parameters

Schrijf een algemene functie om data op te halen van verschillende bronnen en log de data.

fetchData("https://api.artic.edu/api/v1/artworks");
fetchData("https://dummyjson.com/products");
fetchData("https://dummyjson.com/users/1");

1
2
3

# Toon een aangepaste, vertaalde melding gebaseerd op de locatie van de gebruiker

Log in de console een boodschap gebaseerd op de gebruiker zijn locatie. Je kan hiervoor volgende API gebruiken: GeoLocation API (opens new window).

Wanneer er iets mis zou lopen, toon je de standaard boodschap.

const translations = {
  BE: "Welkom in België",
  NL: "Welkom in Nederland",
  DEFAULT: "Hi there!",
};

function greetUser() {
  // Jouw code hier
}

greetUser(); // Welkom in België
greetUser("9.9.9.9"); // Welcome in the US
greetUser("9.9.9.8"); // Hi there!

1
2
3
4
5
6
7
8
9
10
11
12
13

Tip

In de documentatie van de API kan je zien dat je een IP-adres kan meegeven als argument. 9.9.9.9 is een Amerikaans IP, 9.9.9.8 is een Tsjechisch IP. Ga naar de API Documentatie (opens new window)

Fetch