Lære Introduksjon til Asynkron JavaScript | Asynkron JavaScript og API-integrasjon

Hva er asynkron programmering?

Asynkron programmering gjør det mulig for koden din å utføre ikke-blokkerende operasjoner. I motsetning til synkron programmering—der hver operasjon venter på at den forrige skal fullføres før den fortsetter—tillater asynkron programmering at andre oppgaver kan fortsette uten å vente på at en tidligere oppgave er ferdig.

Dette er avgjørende i webutvikling, hvor du ofte må utføre tidkrevende oppgaver, som å hente data fra et API, vente på brukerinput eller sette tidsur.

Tenk deg at vi utvikler et program der 1 og 2 er serverforespørsler, og 3, 4 og 5 er andre operasjoner som å håndtere brukerinteraksjoner.

I det synkrone moduset blokkerer oppgavene 1 og 2 utførelsen av 3, 4 og 5 til de er ferdige. For eksempel, hvis en bruker legger inn en kommentar (1) og deretter prøver å åpne en sidemeny (3), vil grensesnittet fryse til kommentaren er behandlet, noe som skaper forsinkelser.

I det asynkrone moduset blokkerer ikke serverforespørsler (1 og 2) programmet. Mens det ventes på svar, fortsetter programmet med andre oppgaver (3, 4 og 5). Dette gjør at brukeren kan samhandle med sidemenyen umiddelbart etter å ha lagt inn kommentaren, noe som forbedrer responsiviteten.

Forskjeller mellom synkron og asynkron oppførsel

Synkron programmering

Ved synkron programmering utføres oppgaver én etter én. Hver oppgave må fullføres før neste oppgave starter. Hvis én oppgave tar lang tid (for eksempel opplasting av en stor fil), blokkerer den alle påfølgende oppgaver, noe som kan gjøre applikasjonen lite responsiv.


              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 eksemplet vil Oppgave 2 kun kjøre etter at den langvarige oppgaven (løkken) er ferdig. Dette blokkerer kodeutførelsen og kan fryse nettleseren.

Asynkron programmering

Ved asynkron programmering kan oppgaver startes og deretter utføres senere uten å blokkere annen kode. Dette gjør at andre oppgaver kan fortsette mens man venter på at langvarige operasjoner (for eksempel datainnhenting) skal fullføres. Det sikrer at oppgaver som nettverksforespørsler eller tidtakere ikke stopper flyten av andre operasjoner i applikasjonen din.

index.html

index.css

index.js

I dette eksemplet kjører Oppgave 1 umiddelbart, Oppgave 3 kjører også umiddelbart, og Oppgave 2 utføres etter 2 sekunder. Asynkron oppførsel gjør at programmet kan fortsette uten å vente på at Oppgave 2 skal fullføres.

Virkelige eksempler på asynkrone operasjoner

Henting av data fra et API

En av de vanligste asynkrone operasjonene i JavaScript er å hente data fra en ekstern server ved hjelp av API-er. JavaScript ber om data fra et API, men resten av koden fortsetter å kjøre i stedet for å vente på svar fra serveren. Når dataene er tilgjengelige, behandles de ved hjelp av en callback eller promise.

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" viser at synkron kode kjøres umiddelbart etter at den asynkrone henting starter. Det illustrerer at programmet ikke stopper opp mens det venter på API-data;
Asynkron henting: Når dataene er hentet, oppdateres avsnittet med id="apiOutput", noe som viser at den asynkrone oppgaven er fullført.

Tidtakere (setTimeout og setInterval)

JavaScripts setTimeout() og setInterval() brukes ofte for å planlegge oppgaver som skal kjøres etter en forsinkelse eller med jevne mellomrom. Disse funksjonene blokkerer ikke utførelsen av annen kode. Oppgavene de utløser skjer etter en angitt forsinkelse eller intervall, mens resten av koden fortsetter å kjøre.

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" oppdateres umiddelbart, noe som viser at den synkrone delen av koden kjører uten å vente på timeren;
Asynkron timer: Etter 3 sekunder fullføres setTimeout()-tilbakekallet og oppdaterer avsnittet med id="timerOutput" for å vise at timeren er ferdig.

Håndtering av brukerhendelser

JavaScript venter asynkront på at hendelser skal inntreffe uten å blokkere annen kode når det gjelder brukerinteraksjoner (som klikk, innsending av skjema eller tastetrykk). Hendelseslyttere er ikke-blokkerende, noe som betyr at resten av programmet kan fortsette å kjøre mens det ventes på brukerinput.

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" viser at synkron kode kjøres umiddelbart etter at hendelseslytteren er satt opp. Den venter ikke på at brukeren skal klikke på knappen;
Asynkron hendelseshåndtering: Knappens hendelseslytter utløses når brukeren klikker, og oppdaterer avsnittet med id="eventOutput".

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

Sveip for å vise menyen

Hva er asynkron programmering?

Dette er avgjørende i webutvikling, hvor du ofte må utføre tidkrevende oppgaver, som å hente data fra et API, vente på brukerinput eller sette tidsur.

Tenk deg at vi utvikler et program der 1 og 2 er serverforespørsler, og 3, 4 og 5 er andre operasjoner som å håndtere brukerinteraksjoner.

Forskjeller mellom synkron og asynkron oppførsel

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 eksemplet vil Oppgave 2 kun kjøre etter at den langvarige oppgaven (løkken) er ferdig. Dette blokkerer kodeutførelsen og kan fryse nettleseren.

Asynkron programmering

index.html

index.css

index.js

Virkelige eksempler på asynkrone operasjoner

Henting av data fra et API

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" viser at synkron kode kjøres umiddelbart etter at den asynkrone henting starter. Det illustrerer at programmet ikke stopper opp mens det venter på API-data;
Asynkron henting: Når dataene er hentet, oppdateres avsnittet med id="apiOutput", noe som viser at den asynkrone oppgaven er fullført.

Tidtakere (setTimeout og setInterval)

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" oppdateres umiddelbart, noe som viser at den synkrone delen av koden kjører uten å vente på timeren;
Asynkron timer: Etter 3 sekunder fullføres setTimeout()-tilbakekallet og oppdaterer avsnittet med id="timerOutput" for å vise at timeren er ferdig.

Håndtering av brukerhendelser

index.html

index.js

Synkron kode: Avsnittet med id="syncMessage" viser at synkron kode kjøres umiddelbart etter at hendelseslytteren er satt opp. Den venter ikke på at brukeren skal klikke på knappen;
Asynkron hendelseshåndtering: Knappens hendelseslytter utløses når brukeren klikker, og oppdaterer avsnittet med id="eventOutput".

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1