Leer Introductie tot Asynchrone JavaScript | Asynchrone JavaScript en API-Integratie

Wat is asynchroon programmeren?

Asynchroon programmeren maakt het mogelijk om niet-blokkerende bewerkingen uit te voeren. In tegenstelling tot synchroon programmeren—waarbij elke bewerking wacht tot de vorige is voltooid voordat deze doorgaat—staat asynchroon programmeren toe dat andere taken doorgaan zonder te wachten op het afronden van een eerdere taak.

Dit is essentieel in webontwikkeling, waar taken tijd kunnen kosten, zoals het ophalen van gegevens van een API, wachten op gebruikersinvoer of het instellen van timers.

Stel je voor dat we een programma ontwikkelen waarbij 1 en 2 serververzoeken zijn, en 3, 4 en 5 andere bewerkingen zijn zoals het afhandelen van gebruikersinteracties.

In het synchrone model blokkeren taken 1 en 2 de uitvoering van 3, 4 en 5 totdat ze zijn voltooid. Bijvoorbeeld, als een gebruiker een reactie plaatst (1) en vervolgens probeert een zijbalk te openen (3), zal de interface bevriezen totdat de reactie is verwerkt, wat vertragingen veroorzaakt.

In het asynchrone model blokkeren serververzoeken (1 en 2) het programma niet. Terwijl er op een reactie wordt gewacht, gaat het programma verder met andere taken (3, 4 en 5). Hierdoor kan de gebruiker direct met de zijbalk interageren na het plaatsen van de reactie, wat de responsiviteit verbetert.

Verschillen tussen synchrone en asynchrone werking

Synchroon programmeren

Bij synchroon programmeren worden taken één voor één uitgevoerd. Elke taak moet voltooid zijn voordat de volgende begint. Als een taak veel tijd kost (bijvoorbeeld het uploaden van een groot bestand), blokkeert dit alle volgende taken, waardoor de applicatie mogelijk niet reageert.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

In dit voorbeeld zal Taak 2 pas worden uitgevoerd nadat de langdurige taak (de lus) is voltooid. Dit blokkeert de code-uitvoering en kan de browser laten vastlopen.

Asynchrone programmering

Bij asynchrone programmering kunnen taken worden gestart en later worden uitgevoerd zonder andere code te blokkeren. Hierdoor kunnen andere taken doorgaan terwijl wordt gewacht op het voltooien van langdurige operaties (zoals het ophalen van gegevens). Dit zorgt ervoor dat taken zoals netwerkverzoeken of timers de voortgang van andere bewerkingen in uw applicatie niet onderbreken.

index.html

index.css

index.js

In dit voorbeeld wordt Taak 1 direct uitgevoerd, Taak 3 wordt ook direct uitgevoerd en Taak 2 wordt na 2 seconden uitgevoerd. Asynchroon gedrag maakt het mogelijk dat het programma doorgaat zonder te wachten tot Taak 2 is voltooid.

Praktijkvoorbeelden van asynchrone operaties

Gegevens ophalen van een API

Een van de meest voorkomende asynchrone operaties in JavaScript is het ophalen van gegevens van een externe server via API's. JavaScript vraagt gegevens op bij een API, maar de rest van de code blijft uitvoeren zonder te wachten op het antwoord van de server. Zodra de gegevens beschikbaar zijn, worden ze verwerkt met een callback of promise.

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" toont aan dat synchrone code direct wordt uitgevoerd na het starten van de asynchrone fetch. Dit illustreert dat het programma niet pauzeert tijdens het wachten op de API-gegevens;
Asynchrone fetch: Zodra de gegevens zijn opgehaald, wordt de paragraaf met id="apiOutput" bijgewerkt, wat de voltooiing van de asynchrone taak aantoont.

Timers (setTimeout en setInterval)

JavaScript's setTimeout() en setInterval() worden vaak gebruikt om taken te plannen die na een vertraging of op regelmatige intervallen moeten worden uitgevoerd. Deze functies blokkeren de uitvoering van andere code niet. De taken die zij activeren, vinden plaats na een opgegeven vertraging of interval terwijl de rest van de code blijft doorlopen.

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" wordt direct bijgewerkt, wat aantoont dat het synchrone deel van de code wordt uitgevoerd zonder op de timer te wachten;
Asynchrone timer: Na 3 seconden voltooit de setTimeout() callback en werkt de paragraaf met id="timerOutput" bij om aan te geven dat de timer is afgelopen.

Gebruikersinvoergebeurtenissen afhandelen

JavaScript wacht asynchroon op gebeurtenissen zonder andere code te blokkeren bij het verwerken van gebruikersinteracties (zoals klikken, formulierverzendingen of toetsaanslagen). Event listeners zijn niet-blokkerend, wat betekent dat de rest van het programma kan doorgaan met uitvoeren terwijl er op gebruikersinvoer wordt gewacht.

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" toont aan dat synchrone code direct wordt uitgevoerd na het instellen van de event listener. Het wacht niet op een klik van de gebruiker;
Asynchrone gebeurtenisafhandeling: De event listener van de knop wordt geactiveerd wanneer de gebruiker klikt, waardoor de paragraaf met id="eventOutput" wordt bijgewerkt.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 1

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain the main benefits of asynchronous programming?

What are some common use cases for asynchronous programming in web development?

How does asynchronous programming improve user experience?

Awesome!

Completion rate improved to 2.22

Veeg om het menu te tonen

Wat is asynchroon programmeren?

Dit is essentieel in webontwikkeling, waar taken tijd kunnen kosten, zoals het ophalen van gegevens van een API, wachten op gebruikersinvoer of het instellen van timers.

Stel je voor dat we een programma ontwikkelen waarbij 1 en 2 serververzoeken zijn, en 3, 4 en 5 andere bewerkingen zijn zoals het afhandelen van gebruikersinteracties.

Verschillen tussen synchrone en asynchrone werking

Synchroon programmeren


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

In dit voorbeeld zal Taak 2 pas worden uitgevoerd nadat de langdurige taak (de lus) is voltooid. Dit blokkeert de code-uitvoering en kan de browser laten vastlopen.

Asynchrone programmering

index.html

index.css

index.js

Praktijkvoorbeelden van asynchrone operaties

Gegevens ophalen van een API

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" toont aan dat synchrone code direct wordt uitgevoerd na het starten van de asynchrone fetch. Dit illustreert dat het programma niet pauzeert tijdens het wachten op de API-gegevens;
Asynchrone fetch: Zodra de gegevens zijn opgehaald, wordt de paragraaf met id="apiOutput" bijgewerkt, wat de voltooiing van de asynchrone taak aantoont.

Timers (setTimeout en setInterval)

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" wordt direct bijgewerkt, wat aantoont dat het synchrone deel van de code wordt uitgevoerd zonder op de timer te wachten;
Asynchrone timer: Na 3 seconden voltooit de setTimeout() callback en werkt de paragraaf met id="timerOutput" bij om aan te geven dat de timer is afgelopen.

Gebruikersinvoergebeurtenissen afhandelen

index.html

index.js

Synchrone code: De paragraaf met id="syncMessage" toont aan dat synchrone code direct wordt uitgevoerd na het instellen van de event listener. Het wacht niet op een klik van de gebruiker;
Asynchrone gebeurtenisafhandeling: De event listener van de knop wordt geactiveerd wanneer de gebruiker klikt, waardoor de paragraaf met id="eventOutput" wordt bijgewerkt.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 1