In veel toepassingen in de praktijk kan het nodig zijn om meerdere asynchrone taken gelijktijdig uit te voeren of te bepalen welke als eerste voltooid is. JavaScript biedt twee belangrijke methoden om dergelijke situaties te beheren: Promise.all() en Promise.race().

Promise.all(): Taken parallel uitvoeren

Promise.all() maakt het mogelijk om meerdere promises parallel uit te voeren. Het retourneert één enkele promise die wordt opgelost wanneer alle promises in de array zijn opgelost, of wordt afgewezen zodra één promise wordt afgewezen. Dit is nuttig wanneer alle asynchrone operaties succesvol moeten zijn afgerond voordat er verder kan worden gegaan.

De functie fetchMultipleResources verzendt gelijktijdig drie verzoeken om gegevens van een bericht, gebruiker en reacties op te halen. Met Promise.all() worden alle drie de verzoeken samen gestart en wacht de functie tot alle promises zijn opgelost. Na het oplossen worden de resultaten gedeconstrueerd in afzonderlijke variabelen (post, user en comments). De titel van het bericht, de gebruikersnaam en het totale aantal reacties worden vervolgens weergegeven in de HTML. Deze aanpak is efficiënt wanneer alle verzoeken voltooid moeten zijn voordat u verdergaat, omdat de totale wachttijd wordt verminderd door taken gelijktijdig uit te voeren.

Promise.race(): Afhandelen van de eerst opgeloste Promise

Promise.race() retourneert een enkele promise die wordt opgelost of afgewezen zodra de eerste promise in de array is afgehandeld (ofwel opgelost of afgewezen). Dit is nuttig wanneer het snelste resultaat van belang is, bijvoorbeeld om een verzoek af te breken als het te lang duurt.

De functie fetchWithTimeout maakt een timeoutPromise aan die na 3 seconden wordt afgewezen, waarmee een timeout wordt gesimuleerd. Tegelijkertijd vraagt een fetchPromise gegevens op van een API. Met Promise.race() wacht de functie op de promise die als eerste wordt afgehandeld. Als het ophalen binnen 3 seconden voltooid is, wordt de titel van het bericht weergegeven. Anders, als het ophalen te lang duurt, wordt de timeout geactiveerd en verschijnt er een foutmelding ("Request timed out!") in de HTML. Deze aanpak is ideaal voor situaties waarin een snelle reactie essentieel is.

Gebruikssituaties voor het uitvoeren van verzoeken parallel of sequentieel

Wanneer parallelle verzoeken gebruiken (Promise.all())

Parallelle verzoeken zijn ideaal wanneer gegevens van meerdere onafhankelijke bronnen worden opgehaald, omdat alle verzoeken gelijktijdig kunnen worden uitgevoerd. Bijvoorbeeld bij het laden van gebruikersgegevens, berichten en reacties voor een dashboard: elk verzoek staat op zichzelf en is niet afhankelijk van de andere, waardoor ze parallel kunnen worden opgehaald om de prestaties te verbeteren. Deze aanpak minimaliseert de totale wachttijd, omdat de verzoeken gelijktijdig worden verwerkt in plaats van na elkaar.

Wanneer sequentiële verzoeken gebruiken

In sommige gevallen moeten taken in een specifieke volgorde worden uitgevoerd, wat betekent dat de ene taak moet zijn voltooid voordat de volgende kan starten. Voor deze afhankelijke verzoeken kun je async/await in een lus gebruiken of .then()-ketens maken, waarbij je Promise.all() vermijdt.

Een voorbeeld hiervan is eerst gebruikersgegevens ophalen en vervolgens, met de verkregen gebruikers-ID, de berichten van die gebruiker ophalen. In dergelijke scenario's is elk verzoek afhankelijk van het resultaat van het vorige, waardoor een sequentiële aanpak noodzakelijk is.

Dit voorbeeld toont het uitvoeren van sequentiële verzoeken waarbij elk verzoek afhankelijk is van het resultaat van het vorige. In fetchUserDataSequentially haalt de functie eerst gebruikersgegevens op van de API. Zodra de gebruikersgegevens zijn ontvangen en geparseerd, wordt de gebruikers-ID gebruikt in een tweede verzoek om de berichten van de gebruiker op te halen. De resultaten worden vervolgens weergegeven in de HTML, waarbij de naam van de gebruiker en het aantal berichten worden getoond. Deze sequentiële aanpak is noodzakelijk wanneer verzoeken onderling afhankelijk zijn, zodat elk verzoek wordt voltooid voordat het volgende wordt gestart.