Ismerje meg, hogyan hozhat létre aszinkron programokat JavaScript segítségével

Az aszinkron programozás alapvető fontosságú a szoftverfejlesztésben. Nehéz elhinni, hogy ez a programozási koncepció csak a huszonegyedik század óta létezik. Az F# programozási nyelv 2007-ben társai közül elsőként vezette be az aszinkron programozást.

Más nyelvek, mint például a C#, Python, JavaScript és C++ fokozatosan támogatták az aszinkron programozást. A nagy kérdés az, hogy az aszinkron programozás milyen értéket ad az alkalmazásaihoz?

Ez a cikk választ ad erre és más kérdésekre, így mindent megtudhat az aszinkron programozás használatáról.

Mi az a szinkron programozás?

A szinkron programozás a program legalapvetőbb formájára vonatkozik. Ez a programozási modell szekvenciálisan dolgozza fel a programban vagy szkriptben lévő kódsorokat. Mindig a program első kódsorától kezdődik. Ezután megvárja, amíg a kód minden sora befejezi a végrehajtást, mielőtt a következőre lépne.

A szinkron modell feltételes kódot is tartalmaz, mint pl ha és míg nyilatkozatok. Bár a feltételes utasításban csak néhány kód fut le, a program továbbra is szekvenciálisan fut.

Példa a szinkron programra

const SyncCode = () => {
 console.log("Ez az első sor a programban")
 console.log("Ez a második sor a programban")
 console.log("Ez a program utolsó sora")
}
SyncCode();

A fenti JavaScript program futtatása a következő kimenetet eredményezi a konzolon:

Ez a program első sora
Ez a második sor a programban
Ez a program utolsó sora

A fenti kimenet pontosan az, amire számítani kell. A program felülről indul, és megvárja, amíg egy kódsor befejeződik, mielőtt a következőre lép.

Mi az aszinkron programozás?

Az aszinkron programozás a szinkron programozás ellentéte. Az aszinkron programozási modell egyidejűleg több kódsort dolgoz fel. Nem várja meg, amíg a program előző kódsora befejezi a végrehajtását, mielőtt a következőre lép.

Összefüggő: Szinkron vs. Aszinkron programozás: miben különböznek egymástól?

Az aszinkron programozás felére csökkentheti a végrehajtási időt, így hatékonyan gyorsabb számítógépeket hozhat létre.

Példa aszinkron programra

const AsyncCode = () => {
 console.log("Ez az első sor a programban")
 setTimeout(() => {
 console.log("Ez a második sor a programban")
 }, 3000)
 console.log("Ez a program utolsó sora")
}
AsyncCode();

A fenti JavaScript kód végrehajtása a következő kimenetet eredményezi a konzolon:

Ez a program első sora
Ez a program utolsó sora
Ez a második sor a programban

Ha összehasonlítja a fenti konzolkimenetet az azt előállító aszinkron programmal, látni fogja, hogy nyilvánvaló eltérés van. A hívás log amely azt mondja, hogy „Ez a második sor a programban” az „Ez a program utolsó sora” előtt fordul elő. A konzol kimenete azonban ezt nem tükrözi.

Tekintettel arra, hogy a JavaScript elsősorban szinkron, a fenti program kódja szekvenciálisan fut le. De a JavaScript támogatja az aszinkron programozást olyan funkciókon keresztül, mint a setTimeout() módszer.

Az setTimeout() A metódus egy aszinkron JavaScript metódus, amely két argumentumot vesz fel: egy függvényt és egy késleltetést. A késleltetés egy időzítő (ezredmásodpercben), amely késlelteti a funkció végrehajtását. Tehát amíg a fenti program három másodpercre vár, hogy végrehajtsa a funkciót a setTimeout() módszerrel a kód következő sorára lép. Ez azt eredményezi, hogy a harmadik függvényhívás a második előtt kerül végrehajtásra.

Aszinkron JavaScript-technológiák

Eltekintve a setTimeout() A fent említett módszerrel számos JavaScript technológia aszinkron programozást használ. Ezek a technológiák az aszinkron programozási modellt használják gyorsabb, nem blokkoló alkalmazások fejlesztésére. Néhány ilyen technológia a következőket tartalmazza:

• jQuery Ajax
• Axios
• NodeJS

Összefüggő: Mi az a Node.js? Itt van a szerveroldali JavaScript használata

Aszinkron programok létrehozása JavaScript segítségével

Az aszinkron kód kezelésének többféle módja van. A választott módszer a fejleszteni kívánt alkalmazás típusától függ. Ezek a módszerek magukban foglalják a visszahívási függvényeket, az ígéreteket és az async/wait funkciót.

Visszahívási funkciók

A visszahívási függvénynek két fontos tulajdonsága van. Más funkciók paramétereiként szolgálnak, és külső eseményekre támaszkodnak feladataik ellátása során. Az setTimeout() A fenti aszinkron példában használt módszer egy visszahívási függvény. A program egy naplófüggvényt ad át neki paraméterként (a visszahívási függvény), és csak három másodperc múlva hajtja végre (az esemény).

A visszahívási funkciók nagyszerűek a kis programok számára, de az alkalmazások növekedésével nagyon gyorsan túl bonyolulttá válhatnak. Ennek az az oka, hogy a visszahívási függvények gyakran más visszahívási függvényeket hívnak meg, beágyazott visszahívások láncát hozva létre.

Az ígéretek használata

A JavaScript hozzáadta a visszahívás utáni ígéretek támogatását. Jó alternatívát jelentenek nagyobb alkalmazások létrehozásakor. Az ígéret azt jelzi, hogy mi történhet egy aszinkron művelet után. Ez a lehetséges eredmény a következő két formát öltheti: megoldva vagy elutasítva. Egy külön függvény kezeli ezeket az eredményeket, megszüntetve a beágyazás szükségességét (a visszahívási függvény problémája). Ehelyett az ígéretek a könnyebben használható láncfunkciókat ösztönzik.

Minden ígéret újjal kezdődik Ígéret objektum, amelynek névtelen funkciója van a elhatározás és elutasít paramétereket. Ezen a függvényen belül van az aszinkron alkalmazás, amely feloldást ad vissza, ha az aszinkron művelet sikeres, vagy elutasítást ad vissza.

Az azután() lánc funkció kezeli a elhatározás funkciót, és a fogás() lánc funkció kezeli a elutasít funkció. Tehát nincs szükség beágyazott if utasításokra, mint a visszahívási függvényeknél.

Példa az ígéretek felhasználásával

const PromiseFunction = () =>{
 return new Promise((megoldás, elutasítás) => {
 setTimeout(() => {
 megold ("ez az aszinkron művelet jól sikerült")
 }, 3000)
 })
}
PromiseFunction().then((eredmény) => {
 console.log("Siker", eredmény)
}).catch((hiba) => {
 console.log("Hiba", hiba)
})

A fenti kód a következő kimenetet adja vissza a konzolban:

Sikeres ez az aszinkron művelet, jól sikerült

Ez azért van így, mert az ígéret visszaadja a elhatározás függvény, amely átadja eredményeit a azután() funkció. Ha az ígéret visszaadja a elutasít függvényt használja a program fogás funkció helyett.

Az Async/Await használata

Ha nem szeretne ígéretláncot létrehozni az aszinkron műveletek kezelésekor, akkor megpróbálhatja az async/await funkciót. Az Async/await nem egy teljesen más aszinkron eszköz, mint az ígéretek, csak egy másik módja azok kezelésének. Az ígéreteket a láncmódszer használata nélkül kezeli. Tehát ugyanúgy, ahogy az ígéretek jobban kezelik az aszinkron műveleteket, mint a visszahívási funkciók, az async/awaitnek is vannak előnyei az egyszerű ígéretekkel szemben.

Minden aszinkron/várakozás funkciónak két kulcsfontosságú attribútuma van. Kezdik a async kulcsszó, és a várja kulcsszó egy aszinkron művelet eredményére vár.

Példa aszinkron/várakozó programra

const PromiseFunction = () =>{
 return new Promise((megoldás, elutasítás) => {
 setTimeout(() => {
 megold ("ez az aszinkron művelet jól sikerült")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const eredmény = várja a PromiseFunction();
 console.log (eredmény);
}
AsyncAwaitFunc();

A fenti kód a következő kimenetet adja vissza a konzolon:

ez az aszinkron művelet jól sikerült

Melyek a főbb elvihető termékek?

Ebből a cikkből több fontos szempontot is figyelembe kell venni:

• Az aszinkron programozás értékes, mert csökkenti a program várakozási idejét, és gyorsabb alkalmazásokat hoz létre.
• A visszahívási funkció lehet szinkron vagy aszinkron.
• A Promises jobb módot kínál az aszinkron műveletek kezelésére, mint a visszahívási funkciók.
• Az Async/wait függvények jobban kezelik az ígéreteket, mint a láncfüggvények használata.
• Az aszinkron/várakozás funkció szinkron módon kezeli az aszinkron műveleteket, így könnyebben érthető.
• A nyílfüggvények segítenek jobb kód írásában.

A JavaScript nyíl funkciói jobb fejlesztővé tehetik Önt

Szeretnél jobb lenni a webfejlesztésben? A JavaScript ES6-hoz hozzáadott nyílfüggvények segítségével kétféleképpen hozhat létre funkciókat webes alkalmazásokhoz.

Olvassa el a következőt

A szerzőről