In JavaScript worden asynchrone functies en Promises gebruikt om taken uit te voeren die tijd kosten, zoals het ophalen van data van een server, zonder dat de rest van het programma stopt of vastloopt. **Asynchrone functies (async functions):** - Worden gedefinieerd met het sleutelwoord `async`. - Ze zorgen ervoor dat je code overzichtelijk blijft door gebruik te maken van `await`. - Een async functie geeft automatisch een Promise terug. **Promises:** - Representeren een toekomstig resultaat van een asynchrone bewerking. - Ze kunnen in twee staten verkeren: "pending" (in afwachting) of "fulfilled" (voltooid) / "rejected" (geweigerd). **Hoe werken ze samen?** - Binnen een async functie kun je met `await` wachten op een Promise om te worden afgerond. - Hierdoor lijkt de code synchrone code, maar is het in werkelijkheid asynchroon. **Voorbeeld:** ```javascript async function getUser() { const response = await fetch('https://api.example.com/user'); // Wacht tot fetch klaar is return response.json(); // Returnt een Promise die het JSON-object oplevert } // Aanroepen van de async functie getUser() .then(user => { console.log(user); // Hier krijg je het gebruikersobject }) .catch(error => { console.error('Fout bij ophalen gebruiker:', error); }); ``` **Uitleg:** - De functie `getUser` is async, dus retourneert een Promise. - Binnen de functie wordt `await` gebruikt om te wachten op de fetch-aanroep. - Na het krijgen van de response wordt `response.json()` geretourneerd, dat ook een Promise is. - Buiten de functie kun je `.then()` en `.catch()` gebruiken om de resultaten of fouten te verwerken. Kortom: - Gebruik `async` en `await` om asynchrone code makkelijker te lezen en te schrijven. - Promises houden de uitkomsten van asynchrone bewerkingen bij en maken het mogelijk deze resultaten later te verwerken.

Zeker, ik leg het je uit in het Nederlands. ### Asynchrone Functies en Promises in JavaScript In JavaScript zijn veel operaties **asynchroon** (niet-lineair). Dit betekent dat de code niet wacht tot een langdurige taak (zoals een netwerkverzoek) klaar is, maar verder gaat met uitvoeren. Een `Promise` is een object dat de **toekomstige voltooiing (of mislukking)** van zo'n asynchrone operatie voorstelt. **Een Promise kent drie statussen:** 1. **Pending (in afwachting):** De beginstatus, de operatie is nog bezig. 2. **Fulfilled (vervuld):** De operatie is succesvol afgerond. 3. **Rejected (afgewezen):** De operatie is mislukt. Je kunt op het resultaat van een Promise "wachten" met de methodes `.then()` (voor succes) en `.catch()` (voor fouten). Een **`async` functie** is een speciale functie die het werken met Promises veel leesbaarder maakt. Het sleutelwoord `async` voor een functie betekent twee dingen: 1. De functie retourneert *altijd* een Promise. 2. Binnen de functie mag je het sleutelwoord `await` gebruiken. Het sleutelwoord **`await`** kan *alleen* binnen een `async` functie worden gebruikt. Het "pauzeert" de uitvoering van de `async` functie en wacht tot de Promise rechts van `await` is afgerond. Het resultaat is de opgeloste waarde van de Promise. --- ### Jouw Voorbeeld Uitgelegd ```javascript async function getUser() { const response = await fetch('https://api.example.com/user'); return response.json(); } ``` 1. **`async function getUser() { ... }`**: Dit declareert een asynchrone functie genaamd `getUser`. Omdat het een `async` functie is, retourneert deze automatisch een Promise. 2. **`const response = await fetch(...)`**: De `fetch()` functie zelf retourneert een Promise. Het `await` keyword zorgt ervoor dat de uitvoering van de `getUser` functie wordt gepauzeerd tot de Promise van `fetch` is vervuld. De opgeloste waarde (het HTTP-response object) wordt toegewezen aan de variabele `response`. 3. **`return response.json()`**: De methode `response.json()` leest de response body en parseert deze als JSON. Ook deze methode retourneert een Promise! Omdat we in een `async` functie zitten, zorgt `return` er niet voor dat we de Promise zelf retourneren, maar dat we *wachten* op de Promise van `response.json()`. De uiteindelijk opgehaalde JSON-data wordt de vervulde waarde van de Promise die door de `getUser` functie is geretourneerd. **Hetzelfde voorbeeld, maar dan zonder `async/await` (met `.then()`):** ```javascript function getUser() { // fetch retourneert een Promise, we chainen een .then() eraan return fetch('https://api.example.com/user') .then(response => { // response.json() retourneert ook een Promise, dus we returnen die return response.json(); }); // De return value van deze hele functie is een Promise } ``` --- ### Meer Gebruiksvoorbeelden #### 1. Foutafhandeling met `try...catch` Een groot voordeel van `async/await` is dat je fouten kunt afhandelen met vertrouwde `try-catch` blokken. ```javascript async function getUserSafe() { try { const response = await fetch('https://api.example.com/user'); if (!response.ok) { // Controleer of het HTTP-verzoek succesvol was (status 200-299) throw new Error(`HTTP-fout! Status: ${response.status}`); } const userData = await response.json(); console.log('Gebruikersdata:', userData); return userData; } catch (error) { // Vangt zowel netwerkfouten als HTTP-fouten (die we hierboven gooien) console.error('Kon gebruiker niet ophalen:', error.message); // Je kunt ervoor kiezen om de fout opnieuw te throwen // of een standaardwaarde terug te geven. return null; } } // Gebruik getUserSafe().then(data => { if (data) { // Doe iets met de data } }); ``` #### 2. Meerdere Asynchrone Calls Parallel Uitvoeren Gebruik `Promise.all()` om meerdere onafhankelijke asynchrone calls parallel te laten lopen en op alle resultaten te wachten. ```javascript async function getDashboardData(userId) { // Start alle requests parallel, zonder te wachten const userPromise = fetch(`https://api.example.com/users/${userId}`); const postsPromise = fetch(`https://api.example.com/posts?userId=${userId}`); const settingsPromise = fetch(`https://api.example.com/settings/${userId}`); // Wacht nu op alle resultaten tegelijk // Dit is veel sneller dan ze één voor één met await te doen const [userResponse, postsResponse, settingsResponse] = await Promise.all([ userPromise, postsPromise, settingsPromise ]); // Verwerk de responses const user = await userResponse.json(); const posts = await postsResponse.json(); const settings = await settingsResponse.json(); return { user, posts, settings }; } getDashboardData(123).then(dashboardData => console.log(dashboardData)); ``` #### 3. Basis Promise Syntax Hoe het eruitziet zonder `async/await` (handig om te begrijpen wat er onder de motorkap gebeurt). ```javascript function getOldUser() { // fetch retourneert een Promise return fetch('https://api.example.com/user') // .then() wordt aangeroepen wanneer de fetch Promise fulfilled is .then(response => { // We retourneren de Promise van response.json() return response.json(); }) // Deze .then() ontvangt de opgeloste waarde van response.json() .then(userData => { console.log(userData); return userData; // Dit wordt de fulfilled value van de hele Promise chain }) // .catch() vangt fouten op in *elke* stap van de chain .catch(error => { console.error('Mislukt:', error); }); } // Aanroepen getOldUser(); ```