Naučite se ustvariti asinhrone programe z JavaScript

Asinhrono programiranje je osnova razvoja programske opreme. Težko je verjeti, da ta programski koncept obstaja šele od enaindvajsetega stoletja. Programski jezik F# je bil leta 2007 prvi med podobnimi, ki je uvedel asinhrono programiranje.

Drugi jeziki, kot so C#, Python, JavaScript in C++, so postopoma dodali podporo za asinhrono programiranje. Veliko vprašanje je, kakšno vrednost dodaja asinhrono programiranje vašim aplikacijam?

Ta članek odgovarja na to in druga vprašanja, tako da boste izvedeli vse o uporabi asinhronega programiranja.

Kaj je sinhrono programiranje?

Sinhrono programiranje se nanaša na program v njegovi najbolj osnovni obliki. Ta programski model obdeluje vrstice kode v programu ali skriptu zaporedno. Vedno se začne od prve vrstice kode v programu. Nato počaka, da se vsaka vrstica kode izvede, preden se premakne na naslednjo.

Sinhroni model vključuje tudi pogojno kodo, kot je npr če in medtem izjave. Čeprav se bo izvedla samo neka koda v pogojnem stavku, se bo program še vedno izvajal zaporedno.

Primer sinhronega programa

const SyncCode = () => {
 console.log("To je prva vrstica v programu")
 console.log("To je druga vrstica v programu")
 console.log("To je zadnja vrstica v programu")
}
SyncCode();

Zagon zgornjega programa JavaScript bo v konzoli ustvaril naslednji izhod:

To je prva vrstica v programu
To je druga vrstica v programu
To je zadnja vrstica v programu

Zgornji rezultat je točno tisto, kar bi morali pričakovati. Program se začne od vrha in počaka, da se ena vrstica kode konča, preden se premakne na naslednjo.

Kaj je asinhrono programiranje?

Asinhrono programiranje je nasprotje sinhronega programiranja. Model asinhronega programiranja obdeluje več vrstic kod hkrati. Ne čaka, da se prejšnja vrstica kode v programu zaključi z izvajanjem, preden se premakne na naslednjo.

Povezano: Sinhroni vs. Asinhrono programiranje: kako se razlikujejo?

Asinhrono programiranje lahko prepolovi čas izvajanja, kar učinkovito ustvarja hitrejše računalnike.

Primer asinhronega programa

const AsyncCode = () => {
 console.log("To je prva vrstica v programu")
 setTimeout(() => {
 console.log("To je druga vrstica v programu")
 }, 3000)
 console.log("To je zadnja vrstica v programu")
}
AsyncCode();

Izvajanje zgornje kode JavaScript bo v vaši konzoli ustvarilo naslednji izhod:

To je prva vrstica v programu
To je zadnja vrstica v programu
To je druga vrstica v programu

Če primerjate zgornji izhod konzole z asinhronim programom, ki ga generira, boste videli, da je očitno neskladje. Klic na dnevnik ki pravi "To je druga vrstica v programu", se pojavi pred tisto, ki pravi "To je zadnja vrstica v programu". Vendar izhod konzole tega ne odraža.

Glede na to, da je JavaScript predvsem sinhroni, se je koda v zgornjem programu izvajala zaporedno. Toda JavaScript podpira asinhrono programiranje prek funkcij, kot je setTimeout() metoda.

The setTimeout() metoda je asinhrona metoda JavaScript, ki sprejme dva argumenta: funkcijo in zamudo. Zakasnitev je časovnik (v milisekundah), ki zamuja izvajanje funkcije. Torej, medtem ko zgornji program čaka tri sekunde, da izvede funkcijo v setTimeout() metodo, se premakne na naslednjo vrstico v kodi. To povzroči izvedbo tretjega klica funkcije pred drugim.

Asinhrone tehnologije JavaScript

Poleg setTimeout() zgoraj omenjeno metodo več tehnologij JavaScript uporablja asinhrono programiranje. Te tehnologije uporabljajo model asinhronega programiranja za razvoj hitrejših aplikacij, ki ne blokirajo. Nekatere od teh tehnologij vključujejo:

• jQuery Ajax
• Axios
• NodeJS

Povezano: Kaj je Node.js? Tukaj je opisano, kako uporabljati JavaScript na strani strežnika

Ustvarjanje asinhronih programov z JavaScript

Obstaja več načinov za ravnanje z asinhrono kodo. Metoda, ki jo izberete, mora biti odvisna od vrste aplikacije, ki jo želite razviti. Te metode vključujejo funkcije povratnega klica, obljube in async/await.

Funkcije povratnega klica

Obstajata dve pomembni lastnosti funkcije povratnega klica. Služijo kot parametri za druge funkcije in se zanašajo na zunanje dogodke, da opravljajo svojo dolžnost. The setTimeout() metoda, uporabljena v zgornjem asinhronem primeru, je funkcija povratnega klica. Program mu posreduje funkcijo dnevnika kot parameter (funkcija povratnega klica) in jo izvede šele po treh sekundah (dogodek).

Funkcije povratnega klica so odlične za majhne programe, a ko vaše aplikacije rastejo, se lahko zelo hitro zapletejo. To je zato, ker funkcije povratnega klica pogosto pokličejo druge funkcije povratnega klica in ustvarijo verigo ugnezdenih povratnih klicev.

Uporaba Promises

JavaScript je dodal podporo za obljube po funkcijah povratnega klica. So dobra alternativa pri ustvarjanju večjih aplikacij. Obljuba predstavlja, kaj se lahko zgodi po asinhroni operaciji. Ta potencialni izid bo imel eno od dveh oblik: rešeno oz zavrnjen. Vsaka od teh rezultatov obravnava ločena funkcija in odpravlja potrebo po gnezdenju (problem funkcije povratnega klica). Namesto tega obljube spodbujajo verižne funkcije, ki so enostavnejše za uporabo.

Vsaka obljuba se začne z novo Obljubi predmet, ki ima anonimno funkcijo z rešiti in zavrniti parametrov. Znotraj te funkcije boste imeli asinhrono aplikacijo, ki vrne rešitev, če je asinhrona operacija uspešna, ali zavrnitev v nasprotnem primeru.

The potem () verižna funkcija obvladuje rešiti funkcija in ulov() verižna funkcija obvladuje zavrniti funkcijo. Torej ni potrebe po ugnezdenih stavkih if, kot je to v primeru funkcij za povratni klic.

Uporaba primera obljub

const PromiseFunction = () =>{
 vrni novo obljubo((reši, zavrni) => {
 setTimeout(() => {
 resolve("ta asinhrona operacija je bila dobro izvedena")
 }, 3000)
 })
}
PromiseFunction().then((rezultat) => {
 console.log("Uspeh", rezultat)
}).catch((napaka) => {
 console.log("Napaka", napaka)
})

Zgornja koda vrne naslednji izhod v konzoli:

Uspeh, ta asinhrona operacija je bila dobro izvedena

To je zato, ker obljuba vrne rešiti funkcijo, ki svoje rezultate posreduje v potem () funkcijo. Če se obljuba vrne zavrniti funkcijo, ki jo program uporablja ujeti namesto tega funkcija.

Uporaba Async/Await

Če ne želite ustvariti verige obljub, ko se ukvarjate z asinhronimi operacijami, lahko poskusite async/await. Async/await ni povsem drugačno asinhrono orodje od obljub, le drugačen način ravnanja z njimi. Obljublja obravnava brez uporabe metode verige. Torej, podobno kot obljube bolje obravnavajo asinhrone operacije kot funkcije povratnega klica, ima async/await prednosti pred navadnimi obljubami.

Vsaka funkcija async/await ima dva ključna atributa. Začnejo z async ključno besedo in čakati ključna beseda čaka na rezultat asinhrone operacije.

Primer programa Async/Await

const PromiseFunction = () =>{
 vrni novo obljubo((reši, zavrni) => {
 setTimeout(() => {
 resolve("ta asinhrona operacija je bila dobro izvedena")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const rezultat = čakaj PromiseFunction();
 console.log (rezultat);
}
AsyncAwaitFunc();

Zgornja koda bo vrnila naslednji izhod v konzoli:

ta asinhrona operacija je bila dobro izvedena

Kateri so glavni odvzemi?

Obstaja več pomembnih točk, ki jih morate vzeti iz tega članka:

• Asinhrono programiranje je dragoceno, ker skrajša čakalni čas programa in ustvari hitrejše aplikacije.
• Funkcija povratnega klica je lahko sinhrona ali asinhrona.
• Obljube ponujajo boljši način za ravnanje z asinhronimi operacijami kot funkcije povratnega klica.
• Funkcije Async/await obravnavajo obljube na boljši način kot uporaba verižnih funkcij.
• Funkcija async/await obravnava asinhrone operacije na način, ki je videti sinhrono, kar olajša razumevanje.
• Puščične funkcije vam pomagajo napisati boljšo kodo.

Puščične funkcije JavaScript vas lahko naredijo boljšega razvijalca

Želite biti boljši v spletnem razvoju? Puščične funkcije, dodane v JavaScript ES6, vam omogočajo dva načina za ustvarjanje funkcij za spletne aplikacije.

Preberite Naprej

O avtorju