Lær hvordan du opretter asynkrone programmer med JavaScript

Asynkron programmering er en fast bestanddel i softwareudvikling. Det er svært at tro, at dette programmeringskoncept kun har eksisteret siden det enogtyvende århundrede. Programmeringssproget F# var det første blandt sine jævnaldrende til at introducere asynkron programmering i 2007.

Andre sprog som C#, Python, JavaScript og C++ tilføjede gradvist understøttelse af asynkron programmering. Det store spørgsmål er, hvilken værdi tilføjer asynkron programmering til dine applikationer?

Denne artikel besvarer det og andre spørgsmål, så du vil finde ud af alt om, hvordan du bruger asynkron programmering.

Hvad er synkron programmering?

Synkron programmering refererer til et program i dets mest grundlæggende form. Denne programmeringsmodel behandler kodelinjerne i et program eller script sekventielt. Det starter altid fra den første kodelinje i et program. Derefter venter den, indtil hver linje kode har fuldført sin udførelse, før den går videre til den næste.

Den synkrone model omfatter også betinget kode, som f.eks

hvis og mens udsagn. Selvom kun noget kode i en betinget sætning vil køre, vil programmet stadig køre sekventielt.

Synkront program eksempel

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

At køre JavaScript-programmet ovenfor vil producere følgende output i konsollen:

Dette er den første linje i programmet
Dette er anden linje i programmet
Dette er den sidste linje i programmet

Ovenstående output er præcis, hvad du kan forvente. Programmet starter fra toppen og venter, indtil den ene kodelinje er færdig, før den går videre til den næste.

Hvad er asynkron programmering?

Asynkron programmering er det modsatte af synkron programmering. Den asynkrone programmeringsmodel behandler flere linjer med koder samtidigt. Den venter ikke, indtil den forrige kodelinje i et program har fuldført sin udførelse, før den flyttes til den næste.

Relaterede: Synkron vs. Asynkron programmering: Hvordan er de forskellige?

Asynkron programmering kan halvere udførelsestiden, hvilket effektivt skaber hurtigere computere.

Eksempel på asynkront program

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

Udførelse af JavaScript-koden ovenfor vil producere følgende output i din konsol:

Dette er den første linje i programmet
Dette er den sidste linje i programmet
Dette er anden linje i programmet

Hvis du sammenligner konsoloutputtet ovenfor med det asynkrone program, der genererer det, vil du se, at der er en åbenlys uoverensstemmelse. Opkaldet til log der siger "Dette er den anden linje i programmet" forekommer før den, der siger "Dette er den sidste linje i programmet". Imidlertid afspejler konsoludgangen ikke dette.

Da JavaScript primært er synkront, blev koden i programmet ovenfor eksekveret sekventielt. Men JavaScript understøtter asynkron programmering via funktioner som setTimeout() metode.

Det setTimeout() metode er en asynkron JavaScript-metode, der tager to argumenter: en funktion og en forsinkelse. Forsinkelsen er en timer (i millisekunder), der forsinker udførelsen af ​​funktionen. Så mens programmet ovenfor venter på de tre sekunder for at udføre funktionen i setTimeout() metoden, går den videre til næste linje i koden. Dette resulterer i udførelsen af ​​det tredje funktionskald før det andet.

Asynkrone JavaScript-teknologier

Bortset fra setTimeout() metode nævnt ovenfor, bruger flere JavaScript-teknologier asynkron programmering. Disse teknologier bruger den asynkrone programmeringsmodel til at udvikle hurtigere ikke-blokerende applikationer. Nogle af disse teknologier omfatter:

• jQuery Ajax
• Axios
• NodeJS

Relaterede: Hvad er Node.js? Sådan bruger du JavaScript på serversiden

Oprettelse af asynkrone programmer med JavaScript

Der er flere måder at håndtere asynkron kode på. Den metode, du vælger, bør afhænge af den type applikation, du ønsker at udvikle. Disse metoder omfatter tilbagekaldsfunktioner, løfter og asynkron/afvent.

Tilbagekaldsfunktioner

Der er to vigtige egenskaber ved en tilbagekaldsfunktion. De tjener som parametre for andre funktioner, og de er afhængige af eksterne begivenheder for at udføre deres pligt. Det setTimeout() metode, der bruges i det asynkrone eksempel ovenfor, er en tilbagekaldsfunktion. Programmet giver det en logfunktion som en parameter (tilbagekaldsfunktionen), og udfører den først efter tre sekunder (hændelsen).

Tilbagekaldsfunktioner er gode til små programmer, men efterhånden som dine applikationer vokser, kan de meget hurtigt blive for komplicerede. Dette skyldes, at tilbagekaldsfunktioner ofte kalder andre tilbagekaldsfunktioner, hvilket skaber en kæde af indlejrede tilbagekald.

Brug af løfter

JavaScript tilføjede understøttelse af løfter efter tilbagekaldsfunktioner. De er et godt alternativ, når du skal lave større applikationer. Et løfte repræsenterer, hvad der kan ske efter en asynkron operation. Dette potentielle resultat vil antage en af ​​to former: løst eller afvist. En separat funktion håndterer hvert af disse udfald og fjerner behovet for indlejring (tilbagekaldsfunktionsproblemet). I stedet opfordrer løfter til kædefunktioner, som er nemmere at bruge.

Ethvert løfte begynder med et nyt Løfte objekt, der har en anonym funktion med beslutte og afvise parametre. Inden for denne funktion har du den asynkrone applikation, som returnerer en løsning, hvis den asynkrone operation lykkes, eller en anden afvisning.

Det derefter() kædefunktion håndterer beslutte funktion, og fangst() kædefunktion håndterer afvise fungere. Så der er ikke behov for indlejrede if-sætninger, som det er tilfældet med tilbagekaldsfunktioner.

Brug af løfter eksempel

const PromiseFunction = () =>{
 returner nyt løfte((afgør, afvis) => {
 setTimeout(() => {
 resolve("denne asynkrone operation udførte godt")
 }, 3000)
 })
}
PromiseFunction().then((result) => {
 console.log("Succes", resultat)
}).catch((fejl) => {
 console.log("Fejl", fejl)
})

Ovenstående kode returnerer følgende output i konsollen:

Denne asynkrone operation blev udført godt

Dette skyldes, at løftet returnerer beslutte funktion, som sender sine resultater til derefter() fungere. Hvis løftet returnerer afvise funktion programmet bruger fangst funktion i stedet for.

Brug af Async/Await

Hvis du ikke ønsker at oprette en løftekæde, når du beskæftiger dig med asynkrone operationer, så kan du prøve async/wait. Async/await er ikke et helt andet asynkront værktøj end løfter, bare en anden måde at håndtere dem på. Den håndterer løfter uden at bruge kædemetoden. Så på nogenlunde samme måde, som løfter håndterer asynkrone operationer bedre end tilbagekaldsfunktioner, har async/await fordele frem for almindelige løfter.

Der er to nøgleattributter for hver asynkron/afvent-funktion. De starter med asynkron søgeord og vente nøgleord venter på resultatet af en asynkron operation.

Eksempel på Async/Await-program

const PromiseFunction = () =>{
 returner nyt løfte((afgør, afvis) => {
 setTimeout(() => {
 resolve("denne asynkrone operation udførte godt")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const result = await PromiseFunction();
 console.log (resultat);
}
AsyncAwaitFunc();

Ovenstående kode vil returnere følgende output i konsollen:

denne asynkrone operation blev udført godt

Hvad er de vigtigste takeaways?

Der er flere vigtige punkter, du bør tage fra denne artikel:

• Asynkron programmering er værdifuld, fordi den reducerer et programs ventetid, hvilket skaber hurtigere applikationer.
• En tilbagekaldsfunktion kan være synkron eller asynkron.
• Løfter tilbyder en bedre måde at håndtere asynkrone operationer på end tilbagekaldsfunktioner.
• Async/wait-funktioner håndterer løfter på en bedre måde end at bruge kædefunktioner.
• En asynkron/afvent-funktion håndterer asynkrone operationer på en måde, der ser synkron ud, hvilket gør det lettere at forstå.
• Pilefunktioner hjælper dig med at skrive bedre kode.

JavaScript-pilefunktioner kan gøre dig til en bedre udvikler

Vil du blive bedre til webudvikling? Pilefunktioner, tilføjet til JavaScript ES6, giver dig to måder at oprette funktioner til webapps på.

Læs Næste

Om forfatteren