# Asynchroon programmeren
JavaScript is een synchrone, blokkerende en single-threaded taal. Dit wil zeggen dat er maar één bewerking tegelijkertijd kan verwerkt worden. In dit hoofdstuk zullen we echter leren hoe we code toch asynchroon kunnen uitvoeren.
# Synchroon programmeren
Bij synchroon programmeren zullen we;
- Een functie aanroepen
- Wachten op het antwoord van deze functie
- Een volgende functie aanroepen
Wanneer een script wordt uitgevoerd, dan zal de JavaScript engine de instructies van boven naar beneden uitvoeren en dit regel per regel (van links naar rechts).Als we een functie uitvoeren die heel lang duurt, dan kan een bezoeker van die webpagina niks meer met die hangende pagina doen totdat deze functie voltooid is. Zo’n functie wordt dikwijls een blocking function genoemd.
Een blocking function blokkeert alle interacties in de Node.js of webpagina (zoals o.a. muisinteracties). Het laden van externe data of het downloaden van bestanden die synchroon verlopen blokkeren tijdelijk de interface.
function task(message) {
let n = 10000000000;
while (n > 0) {
n--;
}
console.log(message);
}
console.log("Start script...");
task("Downloaded a file.");
console.log("Done!");
2
3
4
5
6
7
8
9
10
Start script...
Download a file.
Done!
2
3
In bovenstaand voorbeeld gebruiken we een while loop binnenin de task() functie die een tijdsintensieve berekening nabootst. De task() functie is in dit geval een blocking function. Het script hangt een paar seconden nadat de tekst Start script... wordt geprint via de console. Na het hangen, wordt de tekst Download a file. en Done! getoond in de console.
function greetUser(name) {
console.log(`Hello, ${name}!`);
}
function processUserData(user) {
console.log("Start verwerken van gebruikersgegevens");
greetUser(user.name);
console.log("Gebruikersgegevens zijn verwerkt");
}
const user = { name: "Alice", age: 25 };
console.log("Start applicatie");
processUserData(user);
console.log("Applicatie beëindigd");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Start applicatie
Start verwerken van gebruikersgegevens
Hello, Alice!
Gebruikersgegevens zijn verwerkt
Applicatie beëindigd
2
3
4
5
Praktisch voorbeeld
Stel je voor dat je een synchrone functie hebt die gegevens van een externe API ophaalt. In synchrone code zou de uitvoering van je programma wachten tot de gegevens zijn opgehaald voordat het doorgaat met andere taken.
// Synchrone functie die gegevens van een externe API ophaalt
function fetchDataSync() {
console.log("Start ophalen van gegevens");
// Simuleer een langzame API-oproep met setTimeout
for (let i = 0; i < 5000000000; i++) {
// Doe niets, wacht gewoon
}
console.log("Gegevens opgehaald");
return "Mijn gegevens";
}
console.log("Begin programma");
// Roep de synchrone functie aan
const data = fetchDataSync();
console.log("Verwerken van gegevens:", data);
console.log(
"Nu wordt er andere code uitgevoerd, zoals bijvoorbeeld het toevoegen van event listeners, mogelijkheid om dropdowns te openen, ..."
);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
In bovenstaand voorbeeld zou het programma wachten tot de fetchDataSync-functie de gegevens heeft opgehaald voordat het doorgaat met de volgende taken. Het simuleert een blokkerende situatie waarin het programma vastloopt terwijl het wacht op de voltooiing van een taak.
Asynchroon programmeren zou in dit geval handig zijn om te voorkomen dat het programma wordt geblokkeerd tijdens het wachten op gegevens.
# Asynchroon programmeren
Ondanks dat Javascript niet asynchroon is, kunnen we onze code toch asynchroon laten gedragen en meerdere bewerkingen laten verwerken op hetzelfde moment met behulp van concepten zoals callbacks, Promises en async/await.