JavaScript Promises en Async/Await uitgelegd
Denk eens aan het online bestellen van een pizza.
Je plaatst je bestelling. Je gaat niet bij de deur staan niksen tot hij wordt bezorgd. Je kijkt video's, werkt of praat met vrienden. Wanneer de pizza aankomt, eet je hem op.
JavaScript werkt op dezelfde manier.
Operaties zoals API-verzoeken, database-aanroepen en timers kosten tijd. Als JavaScript op elke taak zou wachten tot deze klaar is, zou je app vastlopen. In plaats daarvan voert JavaScript andere code uit terwijl het op resultaten wacht.
Wat is een Promise?
Een Promise is een placeholder voor een waarde die je in de toekomst zult ontvangen.
Wanneer je dit uitvoert:
const promise = fetch("/users");
De data is er nog niet. De Promise zegt: "Ik heb het resultaat nu nog niet, maar ik laat het je weten zodra het klaar is."
Een Promise heeft drie statussen:
- Pending
- Fulfilled (Succes)
- Rejected (Fout)
De meeste moderne API's zoals fetch() geven automatisch een Promise terug. Je hoeft ze niet elke keer handmatig aan te maken. Je gebruikt ze gewoon.
Wat doet .then()?
Veel mensen denken dat .then() data ophaalt. Dat is niet zo.
.then() registreert een callback-functie. Je vertelt JavaScript: "Wanneer deze Promise klaar is, voer dan deze specifieke functie uit."
Het is als een maaltijdbezorg-app. Je bestelt eten en de app zegt: "Bel me als het eten er is." De functie wacht op het signaal.
Waarom Async/Await gebruiken?
Je kunt .then()-aanroepen aan elkaar koppelen om stap voor stap data te krijgen. Dit werkt, maar lange ketens zijn lastig te lezen.
Async/await zorgt ervoor dat je code eruitziet als normale, stapsgewijze code. Het is schoner en makkelijker te volgen.
Blokkeert await JavaScript?
Dit is een veelvoorkomende vraag tijdens sollicitatiegesprekken. Het antwoord is nee.
Wanneer JavaScript een await-keyword tegenkomt, pauzeert het alleen die specifieke async-functie. De rest van je applicatie blijft gewoon doorlopen.
Voorbeeld van de flow:
- Voer code uit in de functie.
- Kom bij
awaiten pauzeer die functie. - Voer de rest van het script uit.
- Zodra de taak klaar is, wordt de functie hervat.
Samenvatting:
- Promise = Een toekomstige waarde.
fetch()= Geeft een Promise terug..then()= Voer deze functie uit wanneer klaar.await= Pauzeer deze functie, niet het hele programma.async/await= Een schonere manier om Promises te schrijven.
Bron: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm