I mange virkelige applikationer kan det være nødvendigt at køre flere asynkrone opgaver samtidigt eller afgøre, hvilken der afsluttes først. JavaScript tilbyder to centrale metoder til at håndtere sådanne scenarier: Promise.all() og Promise.race().

Promise.all(): Kørsel af opgaver parallelt

Promise.all() gør det muligt at køre flere promises parallelt. Den returnerer et enkelt promise, der bliver opfyldt, når alle promises i arrayet er opfyldt, eller den afvises, så snart én promise afvises. Dette er nyttigt, når alle asynkrone operationer skal gennemføres med succes, før du fortsætter.

fetchMultipleResources-funktionen sender tre forespørgsler samtidigt for at hente data om et opslag, en bruger og kommentarer. Med Promise.all() igangsættes alle tre forespørgsler på samme tid, og funktionen venter, indtil alle løfter er opfyldt. Når de er opfyldt, destruktureres resultaterne til separate variabler (post, user og comments). Opslagets titel, brugerens navn og det samlede antal kommentarer vises derefter i HTML'en. Denne tilgang er effektiv, når alle forespørgsler skal være fuldført, før der fortsættes, da den reducerer den samlede ventetid ved at køre opgaver parallelt.

Promise.race(): Håndtering af det første opfyldte løfte

Promise.race() returnerer et enkelt løfte, der opfyldes eller afvises, så snart det første løfte i arrayet er afgjort (enten opfyldt eller afvist). Dette er nyttigt, når det hurtigste resultat er relevant, f.eks. ved timeout af en forespørgsel, hvis den tager for lang tid.

fetchWithTimeout-funktionen opretter en timeoutPromise, der afvises efter 3 sekunder, hvilket simulerer en timeout. Samtidig anmoder en fetchPromise om data fra et API. Med Promise.race() afventer funktionen den promise, der afsluttes først. Hvis fetch-operationen fuldføres inden for 3 sekunder, vises postens titel. Ellers, hvis fetch tager for lang tid, udløses timeouten, og en fejlmeddelelse ("Request timed out!") vises i HTML'en. Denne tilgang er ideel til håndtering af situationer, hvor et hurtigt svar er afgørende.

Anvendelsestilfælde for kørsel af forespørgsler parallelt vs. sekventielt

Hvornår skal man bruge parallelle forespørgsler (Promise.all())

Parallelle forespørgsler er ideelle, når der hentes data fra flere uafhængige kilder, da de tillader alle forespørgsler at køre samtidigt. For eksempel, når der indlæses brugerdata, opslag og kommentarer til et dashboard, er hver forespørgsel separat og afhænger ikke af de andre, så de kan hentes parallelt for at forbedre ydeevnen. Denne tilgang minimerer den samlede ventetid, da forespørgslerne behandles samtidigt i stedet for én efter én.

Hvornår skal man bruge sekventielle forespørgsler

I nogle tilfælde skal opgaver udføres i en bestemt rækkefølge, hvilket betyder, at én skal være færdig, før den næste kan starte. For disse afhængige forespørgsler kan du bruge async/await i et loop eller kæde .then()-kald og undgå Promise.all().

Et eksempel kunne være først at hente brugerdata og derefter, ved hjælp af det hentede bruger-ID, hente brugerens opslag. I sådanne scenarier afhænger hver forespørgsel af resultatet af den foregående, hvilket nødvendiggør en sekventiel tilgang.

Dette eksempel demonstrerer sekventielle forespørgsler, hvor hver forespørgsel afhænger af resultatet fra den foregående. I fetchUserDataSequentially henter funktionen først brugerdata fra API'et. Når brugerdataene er modtaget og fortolket, bruges brugerens ID i en anden forespørgsel for at hente brugerens opslag. Resultaterne vises derefter i HTML'en, hvor brugerens navn og antallet af opslag fremgår. Denne sekventielle tilgang er nødvendig, når forespørgsler er indbyrdes afhængige, hvilket sikrer, at hver forespørgsel afsluttes, før den næste påbegyndes.