Leer hoe u asynchrone programma's maakt met JavaScript

Asynchrone programmering is een nietje in softwareontwikkeling. Het is moeilijk te geloven dat dit programmeerconcept pas sinds de eenentwintigste eeuw bestaat. De programmeertaal F# was de eerste van zijn soortgenoten die in 2007 asynchrone programmering introduceerde.

Andere talen zoals C#, Python, JavaScript en C++ voegden geleidelijk ondersteuning toe voor asynchroon programmeren. De grote vraag is, welke waarde voegt asynchroon programmeren toe aan uw applicaties?

Dit artikel geeft antwoord op die en andere vragen, zodat u alles te weten komt over het gebruik van asynchroon programmeren.

Wat is synchroon programmeren?

Synchrone programmering verwijst naar een programma in zijn meest elementaire vorm. Dit programmeermodel verwerkt de regels code in een programma of script sequentieel. Het begint altijd vanaf de eerste regel code in een programma. Vervolgens wacht het totdat elke regel code zijn uitvoering heeft voltooid voordat het naar de volgende gaat.

Het synchrone model bevat ook voorwaardelijke code, zoals:

als en terwijl verklaringen. Hoewel slechts een deel van de code in een voorwaardelijke instructie wordt uitgevoerd, wordt het programma nog steeds sequentieel uitgevoerd.

Voorbeeld synchroon programma

const SyncCode = () => {
 console.log("Dit is de eerste regel in het programma")
 console.log("Dit is de tweede regel in het programma")
 console.log("Dit is de laatste regel in het programma")
}
SyncCode();

Als u het bovenstaande JavaScript-programma uitvoert, wordt de volgende uitvoer in de console geproduceerd:

Dit is de eerste regel in het programma
Dit is de tweede regel in het programma
Dit is de laatste regel in het programma

De output hierboven is precies wat je mag verwachten. Het programma begint vanaf de bovenkant en wacht tot een regel code is voltooid voordat het naar de volgende gaat.

Wat is asynchroon programmeren?

Asynchroon programmeren is het tegenovergestelde van synchroon programmeren. Het asynchrone programmeermodel verwerkt meerdere regels codes tegelijk. Het wacht niet tot de vorige regel code in een programma is uitgevoerd voordat het naar de volgende gaat.

Verwant: Synchroon vs. Asynchrone programmering: hoe zijn ze anders?

Asynchrone programmering kan de uitvoeringstijd halveren, waardoor in feite snellere computers worden gecreëerd.

Voorbeeld asynchrone programma

const AsyncCode = () => {
 console.log("Dit is de eerste regel in het programma")
 setTimeout(() => {
 console.log("Dit is de tweede regel in het programma")
 }, 3000)
 console.log("Dit is de laatste regel in het programma")
}
AsyncCode();

Als u de bovenstaande JavaScript-code uitvoert, wordt de volgende uitvoer in uw console geproduceerd:

Dit is de eerste regel in het programma
Dit is de laatste regel in het programma
Dit is de tweede regel in het programma

Als je de uitvoer van de console hierboven vergelijkt met het asynchrone programma dat het genereert, zul je zien dat er een duidelijke discrepantie is. de oproep om log dat zegt "Dit is de tweede regel in het programma" komt voor de regel "Dit is de laatste regel in het programma". De console-uitvoer weerspiegelt dit echter niet.

Aangezien JavaScript voornamelijk synchroon is, werd de code in het bovenstaande programma sequentieel uitgevoerd. Maar JavaScript ondersteunt asynchroon programmeren via functies zoals de setTimeout() methode.

De setTimeout() methode is een asynchrone JavaScript-methode die twee argumenten nodig heeft: een functie en een vertraging. De vertraging is een timer (in milliseconden), die de uitvoering van de functie vertraagt. Dus, terwijl het bovenstaande programma wacht op de drie seconden om de functie uit te voeren in de setTimeout() methode, gaat het naar de volgende regel in de code. Dit resulteert in de uitvoering van de derde functieaanroep vóór de tweede.

Asynchrone JavaScript-technologieën

Los van de setTimeout() bovengenoemde methode gebruiken verschillende JavaScript-technologieën asynchrone programmering. Deze technologieën gebruiken het asynchrone programmeermodel om snellere niet-blokkerende applicaties te ontwikkelen. Sommige van deze technologieën omvatten:

• jQuery Ajax
• Axios
• NodeJS

Verwant: Wat is Node.js? Hier leest u hoe u JavaScript aan de serverzijde gebruikt

Asynchrone programma's maken met JavaScript

Er zijn verschillende manieren om met asynchrone code om te gaan. De methode die u kiest, moet afhangen van het type applicatie dat u wilt ontwikkelen. Deze methoden omvatten callback-functies, beloften en async/wait.

Terugbelfuncties

Er zijn twee belangrijke eigenschappen van een callback-functie. Ze dienen als parameters voor andere functies en ze vertrouwen op externe gebeurtenissen om hun taak uit te voeren. De setTimeout() methode die in het bovenstaande asynchrone voorbeeld wordt gebruikt, is een callback-functie. Het programma geeft het een logfunctie door als parameter (de callback-functie), en voert het pas na drie seconden uit (de gebeurtenis).

Callback-functies zijn geweldig voor kleine programma's, maar naarmate uw toepassingen groeien, kunnen ze zeer snel te ingewikkeld worden. Dit komt omdat callback-functies vaak andere callback-functies aanroepen, waardoor een reeks geneste callbacks ontstaat.

Beloftes gebruiken

JavaScript heeft ondersteuning toegevoegd voor beloften na callback-functies. Ze zijn een goed alternatief bij het maken van grotere applicaties. Een belofte vertegenwoordigt wat er kan gebeuren na een asynchrone bewerking. Dit mogelijke resultaat zal een van de volgende twee vormen aannemen: opgelost of afgekeurd. Een aparte functie verwerkt elk van deze uitkomsten, waardoor nesten niet meer nodig is (het callback-functieprobleem). In plaats daarvan stimuleren beloften ketenfuncties die gemakkelijker te gebruiken zijn.

Elke belofte begint met een nieuwe Belofte object dat een anonieme functie heeft met de oplossen en afwijzen parameters. Binnen deze functie heb je de asynchrone toepassing, die een oplossing retourneert als de asynchrone bewerking slaagt, of anders een afwijzing.

De dan() kettingfunctie zorgt voor de oplossen functie, en de vangst() kettingfunctie zorgt voor de afwijzen functie. Er zijn dus geen geneste if-statements nodig, zoals het geval is bij callback-functies.

Voorbeeld van beloften gebruiken

const BelofteFunctie = () =>{
 retourneer nieuwe belofte ((oplossen, afwijzen) => {
 setTimeout(() => {
 resolve ("deze asynchrone bewerking is goed uitgevoerd")
 }, 3000)
 })
}
PromiseFunction().then((resultaat) => {
 console.log("Succes", resultaat)
}).catch((fout) => {
 console.log("Fout", fout)
})

De bovenstaande code retourneert de volgende uitvoer in de console:

Succes deze asynchrone operatie is goed uitgevoerd

Dit komt omdat de belofte de teruggeeft oplossen functie, die de resultaten doorgeeft aan de dan() functie. Als de belofte terugkeert de afwijzen functie het programma gebruikt de vangst in plaats daarvan functioneren.

Async/Await gebruiken

Als u geen belofteketen wilt maken bij asynchrone bewerkingen, kunt u asynchrone/wachten proberen. Async/wait is niet een heel ander asynchrone tool dan beloften, maar een andere manier om ermee om te gaan. Het handelt beloften af ​​zonder de kettingmethode te gebruiken. Dus, net zoals beloften asynchrone operaties beter afhandelen dan callback-functies, heeft async/wait voordelen boven gewone beloften.

Er zijn twee belangrijke kenmerken van elke async/wait-functie. Ze beginnen met de asynchrone trefwoord, en de wachten trefwoord wacht op het resultaat van een asynchrone bewerking.

Voorbeeld van Async/Await-programma

const BelofteFunctie = () =>{
 retourneer nieuwe belofte ((oplossen, afwijzen) => {
 setTimeout(() => {
 resolve ("deze asynchrone bewerking is goed uitgevoerd")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const resultaat = wacht op PromiseFunction();
 console.log (resultaat);
}
AsyncAwaitFunc();

De bovenstaande code retourneert de volgende uitvoer in de console:

deze asynchrone bewerking is goed uitgevoerd

Wat zijn de belangrijkste afhaalrestaurants?

Er zijn een aantal belangrijke punten die u uit dit artikel moet halen:

• Asynchrone programmering is waardevol omdat het de wachttijd van een programma verkort en snellere toepassingen creëert.
• Een callback-functie kan synchroon of asynchroon zijn.
• Beloftes bieden een betere manier om asynchrone bewerkingen af ​​te handelen dan callback-functies.
• Async/wait-functies gaan op een betere manier om met beloften dan met ketenfuncties.
• Een async/wait-functie verwerkt asynchrone bewerkingen op een manier die er synchroon uitziet, waardoor het gemakkelijker te begrijpen is.
• Pijlfuncties helpen u om betere code te schrijven.

JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

Wil je beter worden in webontwikkeling? Arrow-functies, toegevoegd aan JavaScript ES6, bieden u twee manieren om functies voor web-apps te maken.

Lees volgende

Over de auteur