I mange virkelige applikasjoner kan det være nødvendig å kjøre flere asynkrone oppgaver samtidig, eller avgjøre hvilken som fullføres først. JavaScript tilbyr to sentrale metoder for å håndtere slike scenarier: Promise.all() og Promise.race().

Promise.all(): Kjøre oppgaver parallelt

Promise.all() gjør det mulig å kjøre flere løfter i parallell. Den returnerer et enkelt løfte som blir oppfylt når alle løftene i arrayet er oppfylt, eller avvises så snart ett løfte blir avvist. Dette er nyttig når alle asynkrone operasjoner må fullføres før man går videre.

Funksjonen fetchMultipleResources sender tre forespørsler samtidig for å hente data om et innlegg, en bruker og kommentarer. Med Promise.all() blir alle tre forespørslene initiert samtidig, og funksjonen venter til alle løftene er oppfylt. Når de er oppfylt, blir resultatene destrukturert til separate variabler (post, user og comments). Innleggstittel, brukernavn og totalt antall kommentarer vises deretter i HTML-en. Denne tilnærmingen er effektiv når du trenger at alle forespørsler skal fullføres før du går videre, siden den reduserer total ventetid ved å kjøre oppgaver parallelt.

Promise.race(): Håndtering av første løste løfte

Promise.race() returnerer et enkelt løfte som blir oppfylt eller avvist så snart det første løftet i arrayet er avgjort (enten oppfylt eller avvist). Dette er nyttig når du er interessert i det raskeste resultatet, for eksempel å avbryte en forespørsel hvis den tar for lang tid.

fetchWithTimeout-funksjonen oppretter et timeoutPromise som avbrytes etter 3 sekunder, og simulerer en tidsavbrudd. Samtidig sender en fetchPromise en forespørsel til et API. Med Promise.race() venter funksjonen på at det første løftet som fullføres, avgjør resultatet. Hvis hentingen fullføres innen 3 sekunder, vises innleggets tittel. Hvis det tar for lang tid, utløses tidsavbruddet, og en feilmelding ("Request timed out!") vises i HTML-en. Denne tilnærmingen er ideell for situasjoner der rask respons er avgjørende.

Bruksområder for å kjøre forespørsler parallelt vs. sekvensielt

Når bruke parallelle forespørsler (Promise.all())

Parallelle forespørsler er ideelle når du henter data fra flere uavhengige kilder, siden alle forespørslene kan kjøres samtidig. For eksempel, når du laster inn brukerdata, innlegg og kommentarer til et dashbord, er hver forespørsel separat og avhenger ikke av de andre, slik at de kan hentes parallelt for å forbedre ytelsen. Denne tilnærmingen minimerer total ventetid, ettersom forespørslene behandles samtidig i stedet for én etter én.

Når bruke sekvensielle forespørsler

I noen tilfeller må oppgaver fullføres i en bestemt rekkefølge, noe som betyr at én må være ferdig før neste kan starte. For slike avhengige forespørsler kan du bruke async/await i en løkke eller kjede .then()-kall, og unngå Promise.all().

Et eksempel er å først hente brukerdata og deretter, ved å bruke den hentede bruker-ID-en, hente brukerens innlegg. I slike scenarier er hver forespørsel avhengig av resultatet fra den forrige, og krever derfor en sekvensiell tilnærming.

Dette eksempelet viser hvordan man utfører sekvensielle forespørsler der hver forespørsel er avhengig av resultatet fra den forrige. I fetchUserDataSequentially henter funksjonen først brukerdata fra API-et. Når brukerdataene er mottatt og tolket, brukes brukerens ID i en andre forespørsel for å hente brukerens innlegg. Resultatene vises deretter i HTML-en, som viser brukerens navn og antall innlegg. Denne sekvensielle tilnærmingen er nødvendig når forespørslene er avhengige av hverandre, og sikrer at hver forespørsel fullføres før neste påbegynnes.