Lära Introduktion till Asynkron JavaScript | Asynkron JavaScript och API-integration

Vad är asynkron programmering?

Asynkron programmering möjliggör att din kod kan utföra icke-blockerande operationer. Till skillnad från synkron programmering—där varje operation väntar på att den föregående ska slutföras innan den fortsätter—tillåter asynkron programmering att andra uppgifter kan fortsätta utan att vänta på att en tidigare uppgift ska bli klar.

Detta är avgörande inom webbutveckling, där du kan behöva utföra tidskrävande uppgifter, såsom att hämta data från ett API, vänta på användarinmatning eller ställa in timers.

Föreställ dig att vi utvecklar ett program där 1 och 2 är serverförfrågningar, och 3, 4 och 5 är andra operationer som att hantera användarinteraktioner.

I den synkrona modellen blockerar uppgifterna 1 och 2 utförandet av 3, 4 och 5 tills de är klara. Om en användare till exempel postar en kommentar (1) och sedan försöker öppna en sidopanel (3), kommer gränssnittet att frysa tills kommentaren har bearbetats, vilket skapar fördröjningar.

I den asynkrona modellen blockerar inte serverförfrågningar (1 och 2) programmet. Medan svaret inväntas fortsätter programmet med andra uppgifter (3, 4 och 5). Detta gör att användaren kan interagera med sidopanelen direkt efter att kommentaren har postats, vilket förbättrar responsiviteten.

Skillnader mellan synkront och asynkront beteende

Synkron programmering

Vid synkron programmering utförs uppgifter en i taget. Varje uppgift måste slutföras innan nästa påbörjas. Om en uppgift tar lång tid (t.ex. en stor filuppladdning) blockeras alla efterföljande uppgifter, vilket kan göra applikationen oresponsiv.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

I det här exemplet kommer Uppgift 2 endast att köras efter att den långvariga uppgiften (loopen) är klar. Detta blockerar kodens körning och kan frysa webbläsaren.

Asynkron programmering

Vid asynkron programmering kan uppgifter initieras och sedan köras senare utan att blockera annan kod. Detta möjliggör att andra uppgifter kan fortsätta medan långvariga operationer (t.ex. datahämtning) slutförs. Det säkerställer att uppgifter som nätverksförfrågningar eller timers inte stoppar applikationens övriga flöde av operationer.

index.html

index.css

index.js

I detta exempel körs Uppgift 1 omedelbart, Uppgift 3 körs också omedelbart, och Uppgift 2 exekveras efter 2 sekunder. Asynkront beteende möjliggör att programmet fortsätter utan att vänta på att Uppgift 2 ska slutföras.

Exempel på asynkrona operationer i verkliga världen

Hämta data från ett API

En av de vanligaste asynkrona operationerna i JavaScript är att hämta data från en fjärrserver med hjälp av API:er. JavaScript begär data från ett API, men resten av koden fortsätter att exekveras istället för att vänta på serverns svar. När datan är tillgänglig bearbetas den med en callback eller promise.

index.html

index.js

Synkron kod: Stycket med id="syncMessage" visar att synkron kod körs omedelbart efter att den asynkrona hämtningen startats. Det visar att programmet inte pausas medan det väntar på API-data;
Asynkron hämtning: När data har hämtats uppdateras stycket med id="apiOutput", vilket visar att den asynkrona uppgiften har slutförts.

Timers (setTimeout och setInterval)

Javascripts setTimeout() och setInterval() används ofta för att schemalägga uppgifter att köras efter en fördröjning eller med jämna mellanrum. Dessa funktioner blockerar inte exekveringen av annan kod. Uppgifterna de utlöser sker efter en angiven fördröjning eller intervall medan resten av koden fortsätter att köras.

index.html

index.js

Synkron kod: Stycket med id="syncMessage" uppdateras omedelbart, vilket visar att den synkrona delen av koden körs utan att vänta på timern;
Asynkron timer: Efter 3 sekunder slutförs setTimeout()-återanropet och uppdaterar stycket med id="timerOutput" för att visa att timern är klar.

Hantering av användarinmatningshändelser

JavaScript väntar asynkront på att händelser ska inträffa utan att blockera annan kod vid hantering av användarinteraktioner (såsom klick, formulärinlämningar eller tangenttryckningar). Händelselyssnare är icke-blockerande, vilket innebär att resten av programmet kan fortsätta att köras medan det väntar på användarinmatning.

index.html

index.js

Synkron kod: Stycket med id="syncMessage" visar att synkron kod körs omedelbart efter att eventlyssnaren har satts upp. Den väntar inte på att användaren ska klicka på knappen;
Asynkron händelsehantering: Knappens eventlyssnare aktiveras när användaren klickar, vilket uppdaterar stycket med id="eventOutput".

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 1

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

Suggested prompts:

Can you explain the main benefits of asynchronous programming?

What are some common use cases for asynchronous programming in web development?

How does asynchronous programming improve user experience?

Awesome!

Completion rate improved to 2.22

Svep för att visa menyn

Vad är asynkron programmering?

Detta är avgörande inom webbutveckling, där du kan behöva utföra tidskrävande uppgifter, såsom att hämta data från ett API, vänta på användarinmatning eller ställa in timers.

Föreställ dig att vi utvecklar ett program där 1 och 2 är serverförfrågningar, och 3, 4 och 5 är andra operationer som att hantera användarinteraktioner.

Skillnader mellan synkront och asynkront beteende

Synkron programmering


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

I det här exemplet kommer Uppgift 2 endast att köras efter att den långvariga uppgiften (loopen) är klar. Detta blockerar kodens körning och kan frysa webbläsaren.

Asynkron programmering

index.html

index.css

index.js

Exempel på asynkrona operationer i verkliga världen

Hämta data från ett API

index.html

index.js

Synkron kod: Stycket med id="syncMessage" visar att synkron kod körs omedelbart efter att den asynkrona hämtningen startats. Det visar att programmet inte pausas medan det väntar på API-data;
Asynkron hämtning: När data har hämtats uppdateras stycket med id="apiOutput", vilket visar att den asynkrona uppgiften har slutförts.

Timers (setTimeout och setInterval)

index.html

index.js

Synkron kod: Stycket med id="syncMessage" uppdateras omedelbart, vilket visar att den synkrona delen av koden körs utan att vänta på timern;
Asynkron timer: Efter 3 sekunder slutförs setTimeout()-återanropet och uppdaterar stycket med id="timerOutput" för att visa att timern är klar.

Hantering av användarinmatningshändelser

index.html

index.js

Synkron kod: Stycket med id="syncMessage" visar att synkron kod körs omedelbart efter att eventlyssnaren har satts upp. Den väntar inte på att användaren ska klicka på knappen;
Asynkron händelsehantering: Knappens eventlyssnare aktiveras när användaren klickar, vilket uppdaterar stycket med id="eventOutput".

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 1