Naučite kako izraditi asinkrone programe s JavaScriptom

Asinkrono programiranje je glavna komponenta u razvoju softvera. Teško je povjerovati da ovaj koncept programiranja postoji tek od dvadeset prvog stoljeća. Programski jezik F# bio je prvi među svojim kolegama koji je uveo asinkrono programiranje, 2007. godine.

Drugi jezici kao što su C#, Python, JavaScript i C++ postupno su dodavali podršku za asinkrono programiranje. Veliko je pitanje koju vrijednost asinkrono programiranje dodaje vašim aplikacijama?

Ovaj članak odgovara na to i druga pitanja, tako da ćete saznati sve o tome kako koristiti asinkrono programiranje.

Što je sinkrono programiranje?

Sinkrono programiranje odnosi se na program u njegovom najosnovnijem obliku. Ovaj model programiranja obrađuje redove koda u programu ili skripti sekvencijalno. Uvijek počinje od prvog retka koda u programu. Zatim čeka dok svaki redak koda ne završi svoje izvršenje prije nego što prijeđe na sljedeći.

Sinkroni model također uključuje uvjetni kod, kao npr ako i dok izjave. Iako će se izvršiti samo neki kod u uvjetnom izrazu, program će se i dalje izvoditi sekvencijalno.

Primjer sinkronog programa

const SyncCode = () => {
 console.log("Ovo je prvi redak u programu")
 console.log("Ovo je drugi redak u programu")
 console.log("Ovo je posljednji redak u programu")
}
SyncCode();

Izvođenje gore navedenog JavaScript programa će proizvesti sljedeći izlaz na konzoli:

Ovo je prvi redak u programu
Ovo je drugi redak u programu
Ovo je posljednji redak u programu

Gornji rezultat je upravo ono što biste trebali očekivati. Program počinje od vrha i čeka dok se jedan redak koda ne završi prije prelaska na sljedeći.

Što je asinkrono programiranje?

Asinkrono programiranje je suprotnost sinkronom programiranju. Model asinkronog programiranja obrađuje nekoliko redaka kodova istovremeno. Ne čeka da prethodni redak koda u programu završi svoje izvršenje prije prelaska na sljedeći.

Povezano: Sinkroni vs. Asinkrono programiranje: po čemu se razlikuju?

Asinkrono programiranje može prepoloviti vrijeme izvršenja, učinkovito stvarajući brža računala.

Primjer asinkronog programa

const AsyncCode = () => {
 console.log("Ovo je prvi redak u programu")
 setTimeout(() => {
 console.log("Ovo je drugi redak u programu")
 }, 3000)
 console.log("Ovo je posljednji redak u programu")
}
AsyncCode();

Izvođenje gore navedenog JavaScript koda će proizvesti sljedeći izlaz na vašoj konzoli:

Ovo je prvi redak u programu
Ovo je posljednji redak u programu
Ovo je drugi redak u programu

Ako usporedite gornji izlaz konzole s asinkronim programom koji ga generira, vidjet ćete da postoji očito odstupanje. Poziv na zapisnik koji kaže "Ovo je drugi redak u programu" pojavljuje se prije onog koji kaže "Ovo je posljednji redak u programu". Međutim, izlaz konzole to ne odražava.

S obzirom na to da je JavaScript primarno sinkroni, kod u gornjem programu se izvršavao sekvencijalno. Ali JavaScript podržava asinkrono programiranje putem značajki poput setTimeout() metoda.

The setTimeout() metoda je asinkrona JavaScript metoda koja uzima dva argumenta: funkciju i kašnjenje. Odgoda je mjerač vremena (u milisekundama), koji odgađa izvršenje funkcije. Dakle, dok gornji program čeka tri sekunde da izvrši funkciju u setTimeout() metodom, prelazi na sljedeći redak u kodu. To rezultira izvršavanjem trećeg poziva funkcije prije drugog.

Asinkrone JavaScript tehnologije

Osim setTimeout() gore spomenutom metodom, nekoliko JavaScript tehnologija koristi asinkrono programiranje. Ove tehnologije koriste model asinkronog programiranja za razvoj bržih neblokirajućih aplikacija. Neke od ovih tehnologija uključuju:

• jQuery Ajax
• Axios
• NodeJS

Povezano: Što je Node.js? Evo kako koristiti JavaScript na strani poslužitelja

Izrada asinkronih programa s JavaScriptom

Postoji nekoliko načina za rukovanje asinkronim kodom. Metoda koju odaberete treba ovisiti o vrsti aplikacije koju želite razviti. Ove metode uključuju funkcije povratnog poziva, obećanja i async/await.

Funkcije povratnog poziva

Postoje dva važna svojstva funkcije povratnog poziva. Oni služe kao parametri za druge funkcije i oslanjaju se na vanjske događaje kako bi izvršili svoju dužnost. The setTimeout() metoda korištena u gornjem asinkronom primjeru je funkcija povratnog poziva. Program mu prosljeđuje funkciju dnevnika kao parametar (funkcija povratnog poziva) i izvršava je tek nakon tri sekunde (događaj).

Funkcije povratnog poziva izvrsne su za male programe, ali kako vaše aplikacije rastu, vrlo brzo mogu postati previše komplicirane. To je zato što funkcije povratnog poziva često pozivaju druge funkcije povratnog poziva, stvarajući lanac ugniježđenih povratnih poziva.

Korištenje obećanja

JavaScript je dodao podršku za obećanja nakon funkcija povratnog poziva. Oni su dobra alternativa pri izradi većih aplikacija. Obećanje predstavlja ono što bi se moglo dogoditi nakon asinkrone operacije. Ovaj potencijalni ishod imat će jedan od dva oblika: riješeno ili odbijeno. Zasebna funkcija obrađuje svaki od ovih ishoda, uklanjajući potrebu za ugniježđenjem (problem funkcije povratnog poziva). Umjesto toga, obećanja potiču lančane funkcije koje su lakše za korištenje.

Svako obećanje počinje novim Obećanje objekt koji ima anonimnu funkciju s odlučnost i odbiti parametrima. Unutar ove funkcije imat ćete asinkronu aplikaciju, koja vraća rješenje ako asinkrona operacija uspije, ili odbacivanje u suprotnom.

The zatim() funkcija lanca obrađuje odlučnost funkcija, i ulov() funkcija lanca obrađuje odbiti funkcija. Dakle, nema potrebe za ugniježđenim if izrazima, kao što je slučaj s funkcijama povratnog poziva.

Korištenje primjera obećanja

const PromiseFunction = () =>{
 vrati novo obećanje((razriješi, odbaci) => {
 setTimeout(() => {
 resolve("ova asinkrona operacija dobro izvršena")
 }, 3000)
 })
}
PromiseFunction().then((rezultat) => {
 console.log("Uspjeh", rezultat)
}).catch((greška) => {
 console.log("Pogreška", pogreška)
})

Gornji kod vraća sljedeći izlaz u konzoli:

Uspješna je ova asinkrona operacija dobro izvedena

To je zato što obećanje vraća odlučnost funkcija, koja svoje rezultate prenosi na zatim() funkcija. Ako se obećanje vrati odbiti funkciju koju program koristi ulov umjesto toga funkcija.

Korištenje Async/Await

Ako ne želite stvoriti lanac obećanja kada se bavite asinkronim operacijama, možete pokušati async/await. Async/await nije potpuno drugačiji asinkroni alat od obećanja, samo je drugačiji način rukovanja njima. Obrađuje obećanja bez korištenja metode lanca. Dakle, na isti način na koji obećanja bolje upravljaju asinkronim operacijama od funkcija povratnog poziva, async/await ima prednosti u odnosu na obična obećanja.

Postoje dva ključna atributa svake funkcije async/await. Počinju s asink ključnu riječ i čekati ključna riječ čeka rezultat asinkrone operacije.

Primjer programa Async/Await

const PromiseFunction = () =>{
 vrati novo obećanje((razriješi, odbaci) => {
 setTimeout(() => {
 resolve("ova asinkrona operacija dobro izvršena")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const rezultat = čekati PromiseFunction();
 console.log (rezultat);
}
AsyncAwaitFunc();

Gornji kod će vratiti sljedeći izlaz u konzoli:

ova asinkrona operacija je dobro izvedena

Koji su glavni zaključci?

Postoji nekoliko glavnih točaka koje biste trebali uzeti iz ovog članka:

• Asinkrono programiranje je vrijedno jer smanjuje vrijeme čekanja programa, stvarajući brže aplikacije.
• Funkcija povratnog poziva može biti sinkrona ili asinkrona.
• Obećanja nude bolji način upravljanja asinkronim operacijama od funkcija povratnog poziva.
• Funkcije async/await rješavaju obećanja na bolji način od korištenja lančanih funkcija.
• Funkcija async/await obrađuje asinkrone operacije na način koji izgleda sinkrono, što olakšava razumijevanje.
• Funkcije strelica pomažu vam da napišete bolji kod.

JavaScript funkcije strelice mogu vas učiniti boljim programerom

Želite biti bolji u web razvoju? Funkcije strelica, dodane u JavaScript ES6, daju vam dva načina za izradu funkcija za web aplikacije.

Pročitajte dalje

O autoru