Lære Introduktion til Asynkron JavaScript | Asynkron JavaScript og API-Integration

Hvad er asynkron programmering?

Asynkron programmering gør det muligt for din kode at udføre ikke-blokerende operationer. I modsætning til synkron programmering—hvor hver operation venter på, at den forrige er færdig, før den fortsætter—tillader asynkron programmering, at andre opgaver kan fortsætte uden at vente på, at en tidligere opgave afsluttes.

Dette er afgørende i webudvikling, hvor du kan have behov for at udføre tidskrævende opgaver, såsom at hente data fra et API, vente på brugerinput eller sætte timere.

Forestil dig, at vi udvikler et program, hvor 1 og 2 er serverforespørgsler, og 3, 4 og 5 er andre operationer som håndtering af brugerinteraktioner.

I det synkrone model blokerer opgaverne 1 og 2 udførelsen af 3, 4 og 5, indtil de er færdige. For eksempel, hvis en bruger poster en kommentar (1) og derefter forsøger at åbne en sidebar (3), vil grænsefladen fryse, indtil kommentaren er behandlet, hvilket skaber forsinkelser.

I det asynkrone model blokerer serverforespørgsler (1 og 2) ikke programmet. Mens der ventes på et svar, fortsætter programmet med andre opgaver (3, 4 og 5). Dette gør det muligt for brugeren at interagere med sidebaren umiddelbart efter at have postet kommentaren, hvilket forbedrer responsiviteten.

Forskelle mellem synkron og asynkron adfærd

Synkron programmering

Ved synkron programmering udføres opgaver én efter én. Hver opgave skal være færdig, før den næste starter. Hvis en opgave tager lang tid (f.eks. upload af en stor fil), blokerer den alle efterfølgende opgaver, hvilket kan gøre applikationen uresponsiv.


              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 dette eksempel vil Opgave 2 først køre, når den langvarige opgave (løkken) er færdig. Dette blokerer kodeudførelsen og kan fryse browseren.

Asynkron programmering

Ved asynkron programmering kan opgaver igangsættes og derefter udføres senere uden at blokere anden kode. Dette gør det muligt for andre opgaver at fortsætte, mens man venter på, at langvarige operationer (f.eks. datahentning) bliver færdige. Det sikrer, at opgaver som netværksanmodninger eller timere ikke stopper applikationens øvrige processer.

index.html

index.css

index.js

I dette eksempel kører Opgave 1 med det samme, Opgave 3 kører også med det samme, og Opgave 2 udføres efter 2 sekunder. Asynkron adfærd gør det muligt for programmet at fortsætte uden at vente på, at Opgave 2 bliver færdig.

Virkelige eksempler på asynkrone operationer

Hentning af data fra et API

En af de mest almindelige asynkrone operationer i JavaScript er at hente data fra en ekstern server ved hjælp af API'er. JavaScript anmoder om data fra et API, men resten af koden fortsætter med at køre i stedet for at vente på serverens svar. Når dataene er tilgængelige, behandles de ved hjælp af et callback eller et promise.

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" viser, at synkron kode køres umiddelbart efter opstart af den asynkrone fetch. Det illustrerer, at programmet ikke sættes på pause, mens der ventes på API-data;
Asynkron fetch: Når dataene er hentet, opdateres afsnittet med id="apiOutput", hvilket demonstrerer afslutningen af den asynkrone opgave.

Timere (setTimeout og setInterval)

JavaScripts setTimeout() og setInterval() bruges ofte til at planlægge opgaver, der skal køres efter en forsinkelse eller med faste intervaller. Disse funktioner blokerer ikke for udførelsen af anden kode. Opgaverne, de udløser, sker efter en angivet forsinkelse eller et interval, mens resten af koden fortsætter med at køre.

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" opdateres straks, hvilket viser, at den synkrone del af koden kører uden at vente på timeren;
Asynkron timer: Efter 3 sekunder fuldfører setTimeout()-callbacken og opdaterer afsnittet med id="timerOutput" for at vise, at timeren er færdig.

Håndtering af brugerinputbegivenheder

JavaScript venter asynkront på, at begivenheder opstår, uden at blokere anden kode, når der arbejdes med brugerinteraktioner (såsom klik, formularindsendelser eller tastetryk). Event listeners er ikke-blokerende, hvilket betyder, at resten af programmet kan fortsætte med at køre, mens der ventes på brugerinput.

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" viser, at synkron kode kører med det samme efter opsætning af event-lytteren. Den venter ikke på, at brugeren klikker på knappen;
Asynkron eventhåndtering: Knapens event-lytter aktiveres, når brugeren klikker, og opdaterer afsnittet med id="eventOutput".

Var alt klart?

Tak for dine kommentarer!

Sektion 4. Kapitel 1

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.22

Stryg for at vise menuen

Hvad er asynkron programmering?

Dette er afgørende i webudvikling, hvor du kan have behov for at udføre tidskrævende opgaver, såsom at hente data fra et API, vente på brugerinput eller sætte timere.

Forestil dig, at vi udvikler et program, hvor 1 og 2 er serverforespørgsler, og 3, 4 og 5 er andre operationer som håndtering af brugerinteraktioner.

Forskelle mellem synkron og asynkron adfærd

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 dette eksempel vil Opgave 2 først køre, når den langvarige opgave (løkken) er færdig. Dette blokerer kodeudførelsen og kan fryse browseren.

Asynkron programmering

index.html

index.css

index.js

Virkelige eksempler på asynkrone operationer

Hentning af data fra et API

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" viser, at synkron kode køres umiddelbart efter opstart af den asynkrone fetch. Det illustrerer, at programmet ikke sættes på pause, mens der ventes på API-data;
Asynkron fetch: Når dataene er hentet, opdateres afsnittet med id="apiOutput", hvilket demonstrerer afslutningen af den asynkrone opgave.

Timere (setTimeout og setInterval)

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" opdateres straks, hvilket viser, at den synkrone del af koden kører uden at vente på timeren;
Asynkron timer: Efter 3 sekunder fuldfører setTimeout()-callbacken og opdaterer afsnittet med id="timerOutput" for at vise, at timeren er færdig.

Håndtering af brugerinputbegivenheder

index.html

index.js

Synkron kode: Afsnittet med id="syncMessage" viser, at synkron kode kører med det samme efter opsætning af event-lytteren. Den venter ikke på, at brugeren klikker på knappen;
Asynkron eventhåndtering: Knapens event-lytter aktiveres, når brugeren klikker, og opdaterer afsnittet med id="eventOutput".

Var alt klart?

Tak for dine kommentarer!

Sektion 4. Kapitel 1