Lär dig hur du skapar asynkrona program med JavaScript

Asynkron programmering är en bas i mjukvaruutveckling. Det är svårt att tro att detta programmeringskoncept bara har funnits sedan det tjugoförsta århundradet. Programmeringsspråket F# var det första bland sina kamrater att introducera asynkron programmering 2007.

Andra språk som C#, Python, JavaScript och C++ lade gradvis till stöd för asynkron programmering. Den stora frågan är, vilket värde tillför asynkron programmering till dina applikationer?

Den här artikeln svarar på det och andra frågor, så du får reda på allt om hur du använder asynkron programmering.

Vad är synkron programmering?

Synkron programmering avser ett program i dess mest grundläggande form. Denna programmeringsmodell bearbetar kodraderna i ett program eller skript sekventiellt. Den börjar alltid från den första raden med kod i ett program. Sedan väntar den tills varje rad kod har slutfört sin exekvering innan den går vidare till nästa.

Den synkrona modellen innehåller även villkorlig kod, som t.ex om och medan uttalanden. Även om endast en del kod i en villkorssats kommer att köras, kommer programmet fortfarande att köras sekventiellt.

Exempel på synkront program

const SyncCode = () => {
 console.log("Detta är den första raden i programmet")
 console.log("Detta är den andra raden i programmet")
 console.log("Detta är den sista raden i programmet")
}
SyncCode();

Att köra JavaScript-programmet ovan kommer att producera följande utdata i konsolen:

Detta är den första raden i programmet
Detta är den andra raden i programmet
Detta är den sista raden i programmet

Utgången ovan är precis vad du kan förvänta dig. Programmet startar från toppen och väntar tills en rad kod slutar innan det går till nästa.

Vad är asynkron programmering?

Asynkron programmering är motsatsen till synkron programmering. Den asynkrona programmeringsmodellen bearbetar flera rader med koder samtidigt. Det väntar inte tills den föregående kodraden i ett program har slutfört sin körning innan den går till nästa.

Relaterad: Synkron vs. Asynkron programmering: Hur är de olika?

Asynkron programmering kan halvera exekveringstiden, vilket effektivt skapar snabbare datorer.

Exempel på asynkront program

const AsyncCode = () => {
 console.log("Detta är den första raden i programmet")
 setTimeout(() => {
 console.log("Detta är den andra raden i programmet")
 }, 3000)
 console.log("Detta är den sista raden i programmet")
}
AsyncCode();

Om du kör JavaScript-koden ovan får du följande utdata i din konsol:

Detta är den första raden i programmet
Detta är den sista raden i programmet
Detta är den andra raden i programmet

Om du jämför konsolutgången ovan med det asynkrona programmet som genererar den, ser du att det finns en uppenbar avvikelse. Uppmaningen till logga som säger "Detta är den andra raden i programmet" förekommer före den som säger "Detta är den sista raden i programmet". Konsolutgången reflekterar dock inte detta.

Med tanke på att JavaScript i första hand är synkront kördes koden i programmet ovan sekventiellt. Men JavaScript stöder asynkron programmering via funktioner som setTimeout() metod.

De setTimeout() metod är en asynkron JavaScript-metod som tar två argument: en funktion och en fördröjning. Fördröjningen är en timer (i millisekunder), som fördröjer exekveringen av funktionen. Så medan programmet ovan väntar på tre sekunder för att utföra funktionen i setTimeout() metoden går den vidare till nästa rad i koden. Detta resulterar i exekveringen av det tredje funktionsanropet före det andra.

Asynkron JavaScript-teknik

Förutom setTimeout() metod som nämns ovan använder flera JavaScript-tekniker asynkron programmering. Dessa teknologier använder den asynkrona programmeringsmodellen för att utveckla snabbare icke-blockerande applikationer. Några av dessa tekniker inkluderar:

• jQuery Ajax
• Axios
• NodeJS

Relaterad: Vad är Node.js? Så här använder du JavaScript på serversidan

Skapa asynkrona program med JavaScript

Det finns flera sätt att hantera asynkron kod. Vilken metod du väljer bör bero på vilken typ av applikation du vill utveckla. Dessa metoder inkluderar callback-funktioner, löften och async/await.

Återuppringningsfunktioner

Det finns två viktiga egenskaper för en återuppringningsfunktion. De fungerar som parametrar för andra funktioner, och de förlitar sig på externa händelser för att utföra sin plikt. De setTimeout() metod som används i det asynkrona exemplet ovan är en återuppringningsfunktion. Programmet skickar det en loggfunktion som en parameter (återuppringningsfunktionen), och exekverar den först efter tre sekunder (händelsen).

Återuppringningsfunktioner är bra för små program, men när dina applikationer växer kan de bli för komplicerade mycket snabbt. Detta beror på att callback-funktioner ofta anropar andra callback-funktioner, vilket skapar en kedja av kapslade callbacks.

Använder löften

JavaScript lade till stöd för löften efter återuppringningsfunktioner. De är ett bra alternativ när du skapar större applikationer. Ett löfte representerar vad som kan hända efter en asynkron operation. Detta potentiella resultat kommer att ha en av två former: löst eller avvisade. En separat funktion hanterar vart och ett av dessa resultat, vilket tar bort behovet av kapsling (problemet med återuppringningsfunktionen). Istället uppmuntrar löften kedjefunktioner som är lättare att använda.

Varje löfte börjar med ett nytt Löfte objekt som har en anonym funktion med lösa och avvisa parametrar. Inom den här funktionen kommer du att ha den asynkrona applikationen, som returnerar en lösning om den asynkrona operationen lyckas, eller ett avvisande på annat sätt.

De sedan() kedjefunktion hanterar lösa funktion och fånga() kedjefunktion hanterar avvisa fungera. Så det finns inget behov av kapslade if-satser, som är fallet med återuppringningsfunktioner.

Använda löften exempel

const PromiseFunction = () =>{
 returnera nytt löfte((lösa, avvisa) => {
 setTimeout(() => {
 resolve("denna asynkrona operation utfördes bra")
 }, 3000)
 })
}
PromiseFunction().then((result) => {
 console.log("Framgång", resultat)
}).catch((fel) => {
 console.log("Fel", fel)
})

Koden ovan returnerar följande utdata i konsolen:

Framgång denna asynkrona operation utfördes bra

Detta beror på att löftet returnerar lösa funktion, som skickar sina resultat till sedan() fungera. Om löftet returnerar avvisa funktionen som programmet använder fånga funktion istället.

Använder Async/Await

Om du inte vill skapa en löfteskedja när du hanterar asynkrona operationer kan du prova async/await. Async/await är inte ett helt annat asynkront verktyg än löften, bara ett annat sätt att hantera dem. Den hanterar löften utan att använda kedjemetoden. Så, på ungefär samma sätt som löften hanterar asynkrona operationer bättre än callback-funktioner, har async/await fördelar jämfört med vanliga löften.

Det finns två nyckelattribut för varje asynkron/vänta-funktion. De börjar med asynkron nyckelord och vänta nyckelordet väntar på resultatet av en asynkron operation.

Async/Await Program Exempel

const PromiseFunction = () =>{
 returnera nytt löfte((lösa, avvisa) => {
 setTimeout(() => {
 resolve("denna asynkrona operation utfördes bra")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const result = await PromiseFunction();
 console.log (resultat);
}
AsyncAwaitFunc();

Koden ovan kommer att returnera följande utdata i konsolen:

denna asynkrona operation utfördes bra

Vilka är de viktigaste takeaways?

Det finns flera viktiga punkter som du bör ta från den här artikeln:

• Asynkron programmering är värdefullt eftersom det minskar ett programs väntetid och skapar snabbare applikationer.
• En återuppringningsfunktion kan vara synkron eller asynkron.
• Löften erbjuder ett bättre sätt att hantera asynkrona operationer än callback-funktioner.
• Async/await-funktioner hanterar löften på ett bättre sätt än att använda kedjefunktioner.
• En async/await-funktion hanterar asynkrona operationer på ett sätt som ser synkront ut, vilket gör det lättare att förstå.
• Pilfunktioner hjälper dig att skriva bättre kod.

JavaScript-pilfunktioner kan göra dig till en bättre utvecklare

Vill du bli bättre på webbutveckling? Pilfunktioner, tillagda till JavaScript ES6, ger dig två sätt att skapa funktioner för webbappar.

Läs Nästa

Om författaren