Lær hvordan du lager asynkrone programmer med JavaScript

Asynkron programmering er en stift i programvareutvikling. Det er vanskelig å tro at dette programmeringskonseptet bare har eksistert siden det tjueførste århundre. Programmeringsspråket F# var det første blant sine jevnaldrende som introduserte asynkron programmering, i 2007.

Andre språk som C#, Python, JavaScript og C++ har gradvis lagt til støtte for asynkron programmering. Det store spørsmålet er, hvilken verdi tilfører asynkron programmering til applikasjonene dine?

Denne artikkelen svarer på det og andre spørsmål, så du vil finne ut alt om hvordan du bruker asynkron programmering.

Hva er synkron programmering?

Synkron programmering refererer til et program i sin mest grunnleggende form. Denne programmeringsmodellen behandler kodelinjene i et program eller skript sekvensielt. Den starter alltid fra den første kodelinjen i et program. Deretter venter den til hver linje med kode har fullført kjøringen før den går videre til neste.

Den synkrone modellen inkluderer også betinget kode, som f.eks

hvis og samtidig som uttalelser. Selv om bare noe kode i en betinget setning vil kjøre, vil programmet fortsatt kjøre sekvensielt.

Eksempel på synkront program

const SyncCode = () => {
 console.log("Dette er den første linjen i programmet")
 console.log("Dette er den andre linjen i programmet")
 console.log("Dette er siste linje i programmet")
}
SyncCode();

Å kjøre JavaScript-programmet ovenfor vil produsere følgende utdata i konsollen:

Dette er første linje i programmet
Dette er den andre linjen i programmet
Dette er siste linje i programmet

Utgangen ovenfor er akkurat det du kan forvente. Programmet starter fra toppen og venter til en linje med kode er ferdig før du går videre til neste.

Hva er asynkron programmering?

Asynkron programmering er det motsatte av synkron programmering. Den asynkrone programmeringsmodellen behandler flere linjer med koder samtidig. Den venter ikke til forrige kodelinje i et program har fullført kjøringen før den går til neste.

I slekt: Synkron vs. Asynkron programmering: Hvordan er de forskjellige?

Asynkron programmering kan halvere utførelsestiden, og skaper effektivt raskere datamaskiner.

Eksempel på asynkront program

const AsyncCode = () => {
 console.log("Dette er den første linjen i programmet")
 setTimeout(() => {
 console.log("Dette er den andre linjen i programmet")
 }, 3000)
 console.log("Dette er siste linje i programmet")
}
AsyncCode();

Å kjøre JavaScript-koden ovenfor vil produsere følgende utdata i konsollen din:

Dette er første linje i programmet
Dette er siste linje i programmet
Dette er den andre linjen i programmet

Hvis du sammenligner konsollutgangen ovenfor med det asynkrone programmet som genererer det, vil du se at det er en åpenbar avvik. Oppfordringen til Logg som sier "Dette er den andre linjen i programmet" kommer før den som sier "Dette er den siste linjen i programmet". Konsollutgangen reflekterer imidlertid ikke dette.

Gitt at JavaScript primært er synkront, ble koden i programmet ovenfor kjørt sekvensielt. Men JavaScript støtter asynkron programmering via funksjoner som setTimeout() metode.

De setTimeout() metode er en asynkron JavaScript-metode som tar to argumenter: en funksjon og en forsinkelse. Forsinkelsen er en timer (i millisekunder), som forsinker utførelsen av funksjonen. Så mens programmet ovenfor venter på de tre sekundene for å utføre funksjonen i setTimeout() metoden, går den videre til neste linje i koden. Dette resulterer i utførelse av det tredje funksjonskallet før det andre.

Asynkron JavaScript-teknologi

Bortsett fra setTimeout() metode nevnt ovenfor, bruker flere JavaScript-teknologier asynkron programmering. Disse teknologiene bruker den asynkrone programmeringsmodellen for å utvikle raskere ikke-blokkerende applikasjoner. Noen av disse teknologiene inkluderer:

• jQuery Ajax
• Axios
• NodeJS

I slekt: Hva er Node.js? Slik bruker du JavaScript på serversiden

Opprette asynkrone programmer med JavaScript

Det er flere måter å håndtere asynkron kode på. Metoden du velger bør avhenge av hvilken type applikasjon du ønsker å utvikle. Disse metodene inkluderer tilbakeringingsfunksjoner, løfter og async/avvent.

Tilbakeringingsfunksjoner

Det er to viktige egenskaper ved en tilbakeringingsfunksjon. De fungerer som parametere for andre funksjoner, og de er avhengige av eksterne hendelser for å utføre sin plikt. De setTimeout() metoden brukt i det asynkrone eksemplet ovenfor er en tilbakeringingsfunksjon. Programmet gir den en loggfunksjon som en parameter (tilbakekallingsfunksjonen), og utfører den først etter tre sekunder (hendelsen).

Tilbakeringingsfunksjoner er flotte for små programmer, men etter hvert som programmene dine vokser, kan de bli for kompliserte veldig raskt. Dette er fordi tilbakeringingsfunksjoner ofte kaller andre tilbakeringingsfunksjoner, og skaper en kjede av nestede tilbakeringinger.

Bruke løfter

JavaScript la til støtte for løfter etter tilbakeringingsfunksjoner. De er et godt alternativ når du skal lage større applikasjoner. Et løfte representerer hva som kan skje etter en asynkron operasjon. Dette potensielle resultatet vil ha en av to former: løst eller avvist. En egen funksjon håndterer hvert av disse resultatene, og fjerner behovet for nesting (problemet med tilbakeringingsfunksjonen). I stedet oppmuntrer løfter til kjedefunksjoner som er enklere å bruke.

Hvert løfte begynner med et nytt Love objekt som har en anonym funksjon med Løse og avvise parametere. Innenfor denne funksjonen vil du ha den asynkrone applikasjonen, som returnerer en løsning hvis den asynkrone operasjonen lykkes, eller en avvisning på annen måte.

De deretter() kjedefunksjonen håndterer Løse funksjon, og å fange() kjedefunksjonen håndterer avvise funksjon. Så det er ikke behov for nestede if-setninger, slik tilfellet er med tilbakeringingsfunksjoner.

Bruk av løfter eksempel

const PromiseFunction = () =>{
 returner nytt løfte((avgjør, avvis) => {
 setTimeout(() => {
 resolve("denne asynkrone operasjonen ble utført bra")
 }, 3000)
 })
}
PromiseFunction().then((result) => {
 console.log("Suksess", resultat)
}).catch((feil) => {
 console.log("Feil", feil)
})

Koden ovenfor returnerer følgende utdata i konsollen:

Vellykket denne asynkrone operasjonen utført godt

Dette er fordi løftet returnerer Løse funksjon, som sender resultatene til deretter() funksjon. Hvis løftet returnerer avvise funksjonen programmet bruker å fange funksjon i stedet.

Bruker Async/Await

Hvis du ikke vil opprette en løftekjede når du arbeider med asynkrone operasjoner, kan du prøve asynkron/avvent. Async/await er ikke et helt annet asynkront verktøy enn løfter, bare en annen måte å håndtere dem på. Den håndterer løfter uten å bruke kjedemetoden. Så på omtrent samme måte som løfter håndterer asynkrone operasjoner bedre enn tilbakeringingsfunksjoner, har async/wait fordeler fremfor vanlige løfter.

Det er to nøkkelattributter for hver asynkron/avvent-funksjon. De starter med asynkron nøkkelord, og avvente nøkkelord venter på resultatet av en asynkron operasjon.

Eksempel på Async/Await Program

const PromiseFunction = () =>{
 returner nytt løfte((avgjør, avvis) => {
 setTimeout(() => {
 resolve("denne asynkrone operasjonen ble utført bra")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const resultat = vent PromiseFunction();
 console.log (resultat);
}
AsyncAwaitFunc();

Koden ovenfor vil returnere følgende utgang i konsollen:

denne asynkrone operasjonen ble utført bra

Hva er de viktigste takeawayene?

Det er flere hovedpunkter du bør ta fra denne artikkelen:

• Asynkron programmering er verdifullt fordi det reduserer et programs ventetid, og skaper raskere applikasjoner.
• En tilbakeringingsfunksjon kan være synkron eller asynkron.
• Løfter tilbyr en bedre måte å håndtere asynkrone operasjoner enn tilbakeringingsfunksjoner.
• Async/wait-funksjoner håndterer løfter på en bedre måte enn å bruke kjedefunksjoner.
• En asynkron/avvent-funksjon håndterer asynkrone operasjoner på en måte som ser synkron ut, noe som gjør det lettere å forstå.
• Pilfunksjoner hjelper deg med å skrive bedre kode.

JavaScript-pilfunksjoner kan gjøre deg til en bedre utvikler

Vil du bli bedre på webutvikling? Pilfunksjoner, lagt til JavaScript ES6, gir deg to måter å lage funksjoner for nettapper på.

Les Neste

Om forfatteren