Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Hantering av Flera Asynkrona Förfrågningar | Asynkron JavaScript och API-integration
Avancerad JavaScript-mästerskap

bookHantering 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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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?

question mark

Vad gör Promise.all() när den får en array av löften?

Select the correct answer

question mark

Vilken metod skulle du använda för att säkerställa att det snabbaste löftet löses först, oavsett de andra?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 10

Fråga AI

expand

Fråga AI

ChatGPT

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

bookHantering 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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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?

question mark

Vad gör Promise.all() när den får en array av löften?

Select the correct answer

question mark

Vilken metod skulle du använda för att säkerställa att det snabbaste löftet löses först, oavsett de andra?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 10
some-alt