I många verkliga applikationer kan det vara nödvändigt att köra flera asynkrona uppgifter samtidigt eller avgöra vilken som avslutas först. JavaScript tillhandahåller två viktiga metoder för att hantera sådana scenarier: Promise.all() och Promise.race().

Promise.all(): Köra uppgifter parallellt

Promise.all() gör det möjligt att köra flera löften i parallell. Den returnerar ett enda löfte som löses när alla löften i arrayen har lösts, eller avvisas så snart ett löfte avvisas. Detta är användbart när alla asynkrona operationer måste slutföras framgångsrikt innan du går vidare.

fetchMultipleResources-funktionen skickar tre förfrågningar samtidigt för att hämta data om ett inlägg, en användare och kommentarer. Med Promise.all() initieras alla tre förfrågningarna samtidigt, och funktionen väntar tills alla löften har lösts. När de har lösts delas resultaten upp i separata variabler (post, user och comments). Inläggets titel, användarens namn och det totala antalet kommentarer visas sedan i HTML-koden. Denna metod är effektiv när alla förfrågningar måste vara klara innan du går vidare, eftersom den minskar den totala väntetiden genom att köra uppgifterna parallellt.

Promise.race(): Hantering av det första lösta löftet

Promise.race() returnerar ett enda löfte som löses eller avvisas så snart det första löftet i arrayen är avgjort (antingen löst eller avvisat). Detta är användbart när det snabbaste resultatet är av intresse, till exempel för att avbryta en förfrågan om den tar för lång tid.

fetchWithTimeout-funktionen skapar ett timeoutPromise som avvisas efter 3 sekunder, vilket simulerar en timeout. Samtidigt begär ett fetchPromise data från ett API. Med Promise.race() inväntar funktionen det löfte som först avslutas. Om hämtningen slutförs inom 3 sekunder visas inläggets titel. Annars, om hämtningen tar för lång tid, utlöses timeouten och ett felmeddelande ("Request timed out!") visas i HTML-koden. Denna metod är optimal för situationer där ett snabbt svar är avgörande.

Användningsområden för parallella kontra sekventiella förfrågningar

När parallella förfrågningar ska användas (Promise.all())

Parallella förfrågningar är lämpliga när data hämtas från flera oberoende källor, eftersom alla förfrågningar kan köras samtidigt. Till exempel, vid inläsning av användardata, inlägg och kommentarer till en instrumentpanel, är varje förfrågan separat och beroende inte av de andra, så de kan hämtas parallellt för att förbättra prestandan. Detta minimerar den totala väntetiden, eftersom förfrågningarna behandlas samtidigt istället för en i taget.

När sekventiella förfrågningar ska användas

I vissa fall måste uppgifter slutföras i en viss ordning, vilket innebär att en måste vara klar innan nästa kan påbörjas. För dessa beroende förfrågningar kan du använda async/await i en loop eller kedja .then()-anrop, och undvika Promise.all().

Ett exempel är att först hämta användardata och sedan, med det hämtade användar-ID:t, hämta användarens inlägg. I sådana scenarier är varje förfrågan beroende av resultatet från den föregående, vilket kräver ett sekventiellt tillvägagångssätt.

Detta exempel visar hur man gör sekventiella förfrågningar där varje förfrågan är beroende av resultatet från den föregående. I fetchUserDataSequentially hämtar funktionen först användardata från API:et. När användardatan har mottagits och tolkats används användarens ID i en andra förfrågan för att hämta användarens inlägg. Resultaten visas sedan i HTML:en, där användarens namn och antal inlägg presenteras. Detta sekventiella tillvägagångssätt är nödvändigt när förfrågningarna är beroende av varandra, vilket säkerställer att varje förfrågan slutförs innan nästa påbörjas.