Zistite, ako vytvoriť asynchrónne programy pomocou JavaScriptu

Asynchrónne programovanie je základom vývoja softvéru. Je ťažké uveriť, že tento koncept programovania existuje len od dvadsiateho prvého storočia. Programovací jazyk F# bol prvým zo svojich rovesníkov, ktorý v roku 2007 zaviedol asynchrónne programovanie.

Ďalšie jazyky ako C#, Python, JavaScript a C++ postupne pridali podporu pre asynchrónne programovanie. Veľkou otázkou je, akú hodnotu pridáva asynchrónne programovanie vašim aplikáciám?

Tento článok odpovedá na tieto a ďalšie otázky, takže sa dozviete všetko o tom, ako používať asynchrónne programovanie.

Čo je to synchrónne programovanie?

Synchrónne programovanie označuje program v jeho najzákladnejšej forme. Tento programovací model spracováva riadky kódu v programe alebo skripte postupne. Vždy začína od prvého riadku kódu v programe. Potom počká, kým každý riadok kódu dokončí svoje vykonanie, a potom prejde na ďalší.

Synchrónny model obsahuje aj podmienený kód, ako napr ak a zatiaľ čo Vyhlásenia. Hoci sa vykoná iba určitý kód v podmienenom príkaze, program bude stále bežať sekvenčne.

Príklad synchrónneho programu

const SyncCode = () => {
 console.log("Toto je prvý riadok v programe")
 console.log("Toto je druhý riadok v programe")
 console.log("Toto je posledný riadok v programe")
}
SyncCode();

Spustenie vyššie uvedeného programu JavaScript vytvorí v konzole nasledujúci výstup:

Toto je prvý riadok v programe
Toto je druhý riadok v programe
Toto je posledný riadok v programe

Vyššie uvedený výstup je presne to, čo by ste mali očakávať. Program sa spustí zhora a pred prechodom na ďalší čaká, kým sa nedokončí jeden riadok kódu.

Čo je asynchrónne programovanie?

Asynchrónne programovanie je opakom synchrónneho programovania. Asynchrónny programovací model spracováva niekoľko riadkov kódov súčasne. Nečaká, kým predchádzajúci riadok kódu v programe nedokončí svoje vykonanie, a potom sa presunie na ďalší.

Súvisiace: Synchrónne vs. Asynchrónne programovanie: Ako sa líšia?

Asynchrónne programovanie môže skrátiť čas vykonávania na polovicu a efektívne vytvárať rýchlejšie počítače.

Príklad asynchrónneho programu

const AsyncCode = () => {
 console.log("Toto je prvý riadok v programe")
 setTimeout(() => {
 console.log("Toto je druhý riadok v programe")
 }, 3000)
 console.log("Toto je posledný riadok v programe")
}
AsyncCode();

Spustenie vyššie uvedeného kódu JavaScript vytvorí vo vašej konzole nasledujúci výstup:

Toto je prvý riadok v programe
Toto je posledný riadok v programe
Toto je druhý riadok v programe

Ak porovnáte výstup konzoly vyššie s asynchrónnym programom, ktorý ho generuje, uvidíte, že existuje zjavná nezrovnalosť. Výzva k log ktorý hovorí, že „Toto je druhý riadok v programe“ sa objaví pred tým, ktorý hovorí „Toto je posledný riadok v programe“. Výstup konzoly to však neodráža.

Vzhľadom na to, že JavaScript je primárne synchrónny, kód v programe vyššie sa spúšťal postupne. JavaScript však podporuje asynchrónne programovanie prostredníctvom funkcií, ako je napr setTimeout() metóda.

The setTimeout() metóda je asynchrónna metóda JavaScript, ktorá má dva argumenty: funkciu a oneskorenie. Oneskorenie je časovač (v milisekundách), ktorý oneskoruje vykonanie funkcie. Takže, kým vyššie uvedený program čaká tri sekundy na vykonanie funkcie v setTimeout() metódou, presunie sa na ďalší riadok v kóde. Výsledkom je vykonanie tretieho volania funkcie pred druhým.

Asynchrónne technológie JavaScript

Okrem setTimeout() vyššie spomenutou metódou používa niekoľko technológií JavaScript asynchrónne programovanie. Tieto technológie využívajú asynchrónny programovací model na vývoj rýchlejších neblokujúcich aplikácií. Niektoré z týchto technológií zahŕňajú:

• jQuery Ajax
• Axios
• NodeJS

Súvisiace: Čo je Node.js? Tu je návod, ako používať JavaScript na strane servera

Vytváranie asynchrónnych programov pomocou JavaScriptu

Existuje niekoľko spôsobov, ako spracovať asynchrónny kód. Spôsob, ktorý si vyberiete, by mal závisieť od typu aplikácie, ktorú chcete vyvinúť. Tieto metódy zahŕňajú funkcie spätného volania, prísľuby a async/wait.

Funkcie spätného volania

Funkcia spätného volania má dve dôležité vlastnosti. Slúžia ako parametre pre iné funkcie a pri plnení svojich povinností sa spoliehajú na vonkajšie udalosti. The setTimeout() metóda použitá vo vyššie uvedenom asynchrónnom príklade je funkcia spätného volania. Program mu odovzdá funkciu protokolu ako parameter (funkcia spätného volania) a vykoná ju až po troch sekundách (udalosť).

Funkcie spätného volania sú skvelé pre malé programy, ale ako vaše aplikácie rastú, môžu sa veľmi rýchlo skomplikovať. Je to preto, že funkcie spätného volania často volajú iné funkcie spätného volania a vytvárajú reťazec vnorených spätných volaní.

Používanie Promises

JavaScript pridal podporu pre prísľuby po funkciách spätného volania. Sú dobrou alternatívou pri vytváraní väčších aplikácií. Prísľub predstavuje to, čo sa môže stať po asynchrónnej operácii. Tento potenciálny výsledok bude mať jednu z dvoch foriem: vyriešené alebo odmietol. Samostatná funkcia spracováva každý z týchto výsledkov, čím sa odstraňuje potreba vnorenia (problém funkcie spätného volania). Namiesto toho sľuby podporujú funkcie reťazca, ktoré sa ľahšie používajú.

Každý sľub začína novým Sľub objekt, ktorý má anonymnú funkciu s vyriešiť a odmietnuť parametre. V rámci tejto funkcie budete mať asynchrónnu aplikáciu, ktorá v prípade úspechu asynchrónnej operácie vráti vyriešenie alebo v opačnom prípade zamietne.

The potom () reťazová funkcia rieši vyriešiť funkcie a chytiť () reťazová funkcia rieši odmietnuť funkciu. Takže nie sú potrebné vnorené príkazy if, ako je to v prípade funkcií spätného volania.

Príklad použitia Promises

const PromiseFunction = () =>{
 vrátiť nový prísľub((vyriešiť, odmietnuť) => {
 setTimeout(() => {
 resolve("táto asynchrónna operácia prebehla dobre")
 }, 3000)
 })
}
PromiseFunction().then((výsledok) => {
 console.log("Úspech", výsledok)
}).catch((chyba) => {
 console.log("Chyba", chyba)
})

Vyššie uvedený kód vráti nasledujúci výstup v konzole:

Táto asynchrónna operácia bola úspešne vykonaná dobre

Je to preto, že sľub vracia vyriešiť funkciu, ktorá odovzdáva svoje výsledky potom () funkciu. Ak sa sľub vráti odmietnuť funkciu, ktorú program používa chytiť funkciu.

Pomocou Async/Await

Ak nechcete vytvárať reťazec prísľubov pri práci s asynchrónnymi operáciami, môžete skúsiť async/wait. Async/await nie je úplne odlišný asynchrónny nástroj od sľubov, len odlišný spôsob ich spracovania. Sľuby zvláda bez použitia reťazovej metódy. Takže v podstate rovnakým spôsobom, akým sľuby zvládajú asynchrónne operácie lepšie ako funkcie spätného volania, async/await má výhody oproti obyčajným sľubom.

Každá funkcia async/wait má dva kľúčové atribúty. Začínajú s async kľúčové slovo a čakať kľúčové slovo čaká na výsledok asynchrónnej operácie.

Príklad programu Async/Await

const PromiseFunction = () =>{
 vrátiť nový prísľub((vyriešiť, odmietnuť) => {
 setTimeout(() => {
 resolve("táto asynchrónna operácia prebehla dobre")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const vysledok = pockaj PromiseFunction();
 console.log (výsledok);
}
AsyncAwaitFunc();

Vyššie uvedený kód vráti nasledujúci výstup v konzole:

táto asynchrónna operácia prebehla dobre

Aké sú hlavné poznatky?

Z tohto článku by ste si mali vziať niekoľko dôležitých bodov:

• Asynchrónne programovanie je cenné, pretože znižuje čakaciu dobu programu a vytvára rýchlejšie aplikácie.
• Funkcia spätného volania môže byť synchrónna alebo asynchrónna.
• Promises ponúkajú lepší spôsob, ako zvládnuť asynchrónne operácie ako funkcie spätného volania.
• Funkcie async/wait zvládajú sľuby lepšie ako používanie reťazových funkcií.
• Funkcia async/wait spracováva asynchrónne operácie spôsobom, ktorý vyzerá synchrónne, čo uľahčuje pochopenie.
• Funkcie šípok vám pomôžu napísať lepší kód.

Funkcie šípok JavaScript z vás môžu urobiť lepšieho vývojára

Chcete byť lepší vo vývoji webu? Funkcie šípok pridané do JavaScriptu ES6 vám poskytujú dva spôsoby vytvárania funkcií pre webové aplikácie.

Prečítajte si ďalej

O autorovi