Hantering av Flera Asynkrona Förfrågningar
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.
index.html
index.js
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.
index.html
index.js
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.
index.html
index.js
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.
1. Vad gör Promise.all()
när den får en array av löften?
2. Vilken metod skulle du använda för att säkerställa att det snabbaste löftet löses först, oavsett de andra?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.22
Hantering av Flera Asynkrona Förfrågningar
Svep för att visa menyn
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.
index.html
index.js
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.
index.html
index.js
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.
index.html
index.js
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.
1. Vad gör Promise.all()
när den får en array av löften?
2. Vilken metod skulle du använda för att säkerställa att det snabbaste löftet löses först, oavsett de andra?
Tack för dina kommentarer!