Siit saate teada, kuidas luua JavaScriptiga asünkroonseid programme

Asünkroonne programmeerimine on tarkvaraarenduse põhielement. On raske uskuda, et see programmeerimiskontseptsioon on olnud alles kahekümne esimesest sajandist. Programmeerimiskeel F# oli 2007. aastal esimene oma analoogidest, mis võttis kasutusele asünkroonse programmeerimise.

Teised keeled, nagu C#, Python, JavaScript ja C++, lisasid järk-järgult asünkroonse programmeerimise tuge. Suur küsimus on, millist väärtust asünkroonne programmeerimine teie rakendustele lisab?

See artikkel vastab sellele ja teistele küsimustele, nii et saate teada, kuidas asünkroonset programmeerimist kasutada.

Mis on sünkroonne programmeerimine?

Sünkroonprogrammeerimine viitab programmile selle kõige elementaarsemal kujul. See programmeerimismudel töötleb programmi või skripti koodiridu järjestikku. See algab alati programmi esimesest koodireast. Seejärel ootab see, kuni iga koodirida on täitmise lõpetanud, enne kui liigub järgmise juurde.

Sünkroonmudel sisaldab ka tingimuskoodi, nt kui ja samas avaldused. Kuigi tingimuslauses käivitatakse ainult osa koodist, töötab programm siiski järjestikku.

Sünkroonprogrammi näide

const SyncCode = () => {
 console.log("See on programmi esimene rida")
 console.log("See on programmi teine ​​rida")
 console.log ("See on programmi viimane rida")
}
SyncCode();

Ülaltoodud JavaScripti programmi käivitamine annab konsoolis järgmise väljundi:

See on programmi esimene rida
See on programmi teine ​​rida
See on programmi viimane rida

Ülaltoodud väljund on täpselt see, mida peaksite ootama. Programm algab ülalt ja ootab, kuni üks koodirida lõpeb, enne kui liigub järgmisele.

Mis on asünkroonne programmeerimine?

Asünkroonne programmeerimine on sünkroonse programmeerimise vastand. Asünkroonse programmeerimismudel töötleb korraga mitut koodirida. See ei oota, kuni programmi eelmine koodirida on täitmise lõpetanud, enne kui liigub järgmisele.

Seotud: Sünkroonne vs. Asünkroonne programmeerimine: kuidas need erinevad?

Asünkroonne programmeerimine võib lühendada täitmise aega poole võrra, luues tõhusalt kiiremaid arvuteid.

Asünkroonse programmi näide

const AsyncCode = () => {
 console.log("See on programmi esimene rida")
 setTimeout(() => {
 console.log("See on programmi teine ​​rida")
 }, 3000)
 console.log ("See on programmi viimane rida")
}
AsyncCode();

Ülaltoodud JavaScripti koodi käivitamine annab teie konsoolis järgmise väljundi:

See on programmi esimene rida
See on programmi viimane rida
See on programmi teine ​​rida

Kui võrdlete ülaltoodud konsooli väljundit selle genereeriva asünkroonse programmiga, näete, et seal on ilmne lahknevus. Kõne aadressile logi kiri "See on programmi teine ​​rida" esineb enne seda, mis ütleb "See on programmi viimane rida". Konsooli väljund seda aga ei kajasta.

Arvestades, et JavaScript on peamiselt sünkroonne, käivitus ülaltoodud programmi kood järjestikku. Kuid JavaScript toetab asünkroonset programmeerimist selliste funktsioonide kaudu nagu setTimeout() meetod.

The setTimeout() meetod on asünkroonne JavaScripti meetod, millel on kaks argumenti: funktsioon ja viivitus. Viivitus on taimer (millisekundites), mis viivitab funktsiooni täitmist. Seega, kui ülaltoodud programm ootab funktsiooni täitmiseks kolm sekundit setTimeout() meetodil, liigub see koodis järgmisele reale. Selle tulemuseks on kolmanda funktsioonikutse täitmine enne teist.

Asünkroonsed JavaScripti tehnoloogiad

Peale selle setTimeout() ülalmainitud meetodil kasutavad mitmed JavaScripti tehnoloogiad asünkroonset programmeerimist. Need tehnoloogiad kasutavad kiiremate mitteblokeerivate rakenduste arendamiseks asünkroonset programmeerimismudelit. Mõned neist tehnoloogiatest hõlmavad järgmist:

• jQuery Ajax
• Axios
• NodeJS

Seotud: Mis on Node.js? Siin on, kuidas kasutada serveripoolset JavaScripti

Asünkroonsete programmide loomine JavaScriptiga

Asünkroonse koodi käsitlemiseks on mitu võimalust. Teie valitud meetod peaks sõltuma rakenduse tüübist, mida soovite arendada. Need meetodid hõlmavad tagasihelistamisfunktsioone, lubadusi ja asünkroonimist/ootmist.

Tagasihelistamise funktsioonid

Tagasihelistamisfunktsioonil on kaks olulist omadust. Need toimivad parameetritena muude funktsioonide jaoks ja toetuvad oma kohustuste täitmiseks välistele sündmustele. The setTimeout() ülaltoodud asünkroonses näites kasutatav meetod on tagasihelistamise funktsioon. Programm edastab sellele parameetrina logifunktsiooni (tagasihelistamise funktsioon) ja käivitab selle alles kolme sekundi pärast (sündmus).

Tagasihelistamise funktsioonid sobivad suurepäraselt väikeste programmide jaoks, kuid rakenduste kasvades võivad need muutuda väga kiiresti liiga keeruliseks. Seda seetõttu, et tagasihelistamisfunktsioonid kutsuvad sageli teisi tagasihelistamisfunktsioone, luues pesastatud tagasihelistuste ahela.

Lubaduste kasutamine

JavaScript lisas tagasihelistamisjärgsete lubaduste toe. Need on hea alternatiiv suuremate rakenduste loomisel. Lubadus tähistab seda, mis võib juhtuda pärast asünkroonset operatsiooni. Sellel võimalikul tulemusel on kaks vormi: lahendatud või tagasi lükatud. Eraldi funktsioon käsitleb kõiki neid tulemusi, eemaldades vajaduse pesastamiseks (tagasihelistamisfunktsiooni probleem). Selle asemel soodustavad lubadused ketifunktsioone, mida on lihtsam kasutada.

Iga lubadus algab uuega Lubadus objekt, millel on anonüümne funktsioon lahendada ja tagasi lükata parameetrid. Selles funktsioonis on teil asünkroonne rakendus, mis tagastab lahenduse, kui asünkroonne toiming õnnestub, või tagasilükkamise muul juhul.

The siis () ahelfunktsioon käsitleb lahendada funktsioon ja püüda() ahelfunktsioon käsitleb tagasi lükata funktsiooni. Seega pole pesastatud if-lauseid vaja, nagu see on tagasihelistamisfunktsioonide puhul.

Kasutades lubaduste näidet

const PromiseFunction = () =>{
 return new Promise((lahendada, tagasi lükata) => {
 setTimeout(() => {
 lahenda ("see asünkroonne toiming sooritati hästi")
 }, 3000)
 })
}
PromiseFunction().then((tulemus) => {
 console.log("Edu", tulemus)
}).catch((viga) => {
 console.log("Viga", viga)
})

Ülaltoodud kood tagastab konsoolis järgmise väljundi:

See asünkroonne toiming õnnestus hästi

Seda seetõttu, et lubadus tagastab lahendada funktsioon, mis edastab oma tulemused siis () funktsiooni. Kui lubadus tagastab tagasi lükata funktsiooni programm kasutab püüda funktsiooni asemel.

Asünkrooni/ootmise kasutamine

Kui te ei soovi asünkroonsete toimingute tegemisel luua lubadusahelat, võite proovida asünkroonset / ootamist. Asünkroon/ootamine ei ole lubadustest täiesti erinev asünkroonne tööriist, vaid nende käsitlemise erinev viis. See käsitleb lubadusi ilma kettmeetodit kasutamata. Nii nagu lubadused käitlevad asünkroonseid toiminguid paremini kui tagasihelistamise funktsioonid, on asünkroonil/ootmisel eelised tavaliste lubadustega võrreldes.

Igal asünkrooni/ootamise funktsioonil on kaks peamist atribuuti. Nad algavad asünkr märksõna ja ootama märksõna ootab asünkroonse toimingu tulemust.

Asünkrooni/ootusprogrammi näide

const PromiseFunction = () =>{
 return new Promise((lahendada, tagasi lükata) => {
 setTimeout(() => {
 lahenda ("see asünkroonne toiming sooritati hästi")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const tulemus = oodake PromiseFunction();
 console.log (tulemus);
}
AsyncAwaitFunc();

Ülaltoodud kood tagastab konsoolis järgmise väljundi:

see asünkroonne toiming toimis hästi

Mis on peamised toidupakkumised?

Sellest artiklist peaksite võtma mitmeid olulisi punkte:

• Asünkroonne programmeerimine on väärtuslik, kuna see vähendab programmi ooteaega, luues kiiremaid rakendusi.
• Tagasihelistamisfunktsioon võib olla sünkroonne või asünkroonne.
• Lubadused pakuvad paremat viisi asünkroonsete toimingute käsitlemiseks kui tagasihelistamise funktsioonid.
• Funktsioonid Asünkroniseerimine/ootamine käsitlevad lubadusi paremini kui ahelfunktsioonide kasutamine.
• Asünkroonse/ootamise funktsioon käsitleb asünkroonseid toiminguid viisil, mis näeb välja sünkroonne, muutes selle mõistmise lihtsamaks.
• Noolefunktsioonid aitavad teil paremat koodi kirjutada.

JavaScripti noolefunktsioonid võivad muuta teid paremaks arendajaks

Kas soovite veebiarenduses parem olla? JavaScript ES6-le lisatud noolefunktsioonid annavad teile kaks võimalust veebirakenduste jaoks funktsioonide loomiseks.

Loe edasi

Autori kohta