{"id":36774,"date":"2019-10-31T22:13:44","date_gmt":"2019-10-31T19:13:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs\/"},"modified":"2019-10-31T22:13:44","modified_gmt":"2019-10-31T19:13:44","slug":"asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","status":"publish","type":"post","link":"https:\/\/prohoster.info\/hr\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asinhrono programiranje u JavaScriptu. ( Callback, Promise, RxJs )","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Pozdrav svima. Ovde je Sergej Omelnitzki. Nedavno sam imao stream o reaktivnom programiranju, gde sam pri\u010dao o asinhronosti u JavaScriptu. Danas bih \u017eeleo da sa\u017emem ovaj materijal. <\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

Ali pre nego \u0161to zapo\u010dnemo glavni materijal, potrebno je da uradimo uvod. Dakle, hajde da po\u010dnemo s definicijama: \u0161ta je stek i red?
\nStek <\/strong>je kolekcija \u010diji se elementi uzimaju po principu \u201eposlednji do\u0161ao, prvi oti\u0161ao\u201c LIFO
\nRed <\/strong>je kolekcija \u010diji se elementi uzimaju po principu \u201eprvi do\u0161ao, prvi oti\u0161ao\u201c FIFO<\/p>\n

<\/p>\n

U redu, nastavljamo. <\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

JavaScript je jezgro za programiranje sa jednim tokom. To zna\u010di da postoji samo jedan tok izvr\u0161avanja i jedan stek, u koji se funkcije stavljaju u red za izvr\u0161avanje. Samim tim, u jednom trenutku JavaScript mo\u017ee izvr\u0161iti samo jednu operaciju, dok ostale operacije \u010dekaju svoj red u steku, dok ne budu pozvane. <\/p>\n

<\/a><\/noindex><\/p>\n

Stek poziva<\/strong> je struktura podataka koja, pojednostavljeno re\u010deno, bele\u017ei informacije o mestu u programu gde se nalazimo. Ako ulazimo u funkciju, sme\u0161tamo njen zapis na vrh steka. Kada se vra\u0107amo iz funkcije, uzimamo najgornji element iz steka i vra\u0107amo se na mesto odakle smo pozvali tu funkciju. To je sve \u0161to stek radi. A sada izuzetno zanimljivo pitanje. Kako onda radi asinhronost u JavaScriptu?<\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

U stvari, pored steka, u browserima postoji poseban red za rad sa takozvanim WebAPI. Funkcije iz ovog reda bi\u0107e izvr\u0161ene redom tek nakon \u0161to se stek potpuno isprazni. Tek tada se prebacuju iz reda u stek za izvr\u0161avanje. Ako u steku trenutno postoji barem jedan element, one ne mogu do\u0107i u stek. Zbog toga, pozivi funkcija putem timeouta \u010desto nisu ta\u010dni u vremenu, jer funkcija ne mo\u017ee u\u0107i iz reda u stek dok je on pun. <\/p>\n

<\/p>\n

Razmotri\u0107emo slede\u0107i primer i posvetiti se njegovom korak-po-korak \u201eizvr\u0161enju\u201c. Tako\u0111e, razmotri\u0107emo \u0161ta se u tom trenutku de\u0161ava u sistemu.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
1) Dok se ni\u0161ta ne de\u0161ava. Konzola browsera je prazna, stek poziva je prazan.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
2) Zatim se naredba console.log('Hi') dodaje u stek poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
3) I ona se izvr\u0161ava<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
4) Potom se console.log('Hi') uklanja iz steka poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
5) Sada prelazimo na naredbu setTimeout(function cb1() {\u2026 }). Ona se dodaje u stog poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
6) Naredba setTimeout(function cb1() {\u2026 }) se izvr\u0161ava. Preglednik kreira tajmer koji je deo Web API-ja. On \u0107e izvr\u0161iti odbrojavanje.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
7) Naredba setTimeout(function cb1() {\u2026 }) je zavr\u0161ila sa radom i uklanja se iz stoga poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
8) Naredba console.log('Bye') dodaje se u stek poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
9) Naredba console.log('Bye') se izvr\u0161ava.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
10) Naredba console.log('Bye') uklanja se iz steka poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
11) Nakon \u0161to pro\u0111e najmanje 5000 ms, tajmer zavr\u0161ava sa radom i stavlja povratni poziv cb1 u red povratnih poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
12) Ciklus doga\u0111aja uzima funkciju cb1 iz reda povratnih poziva i stavlja je u stog poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
13) Funkcija cb1 se izvr\u0161ava i dodaje console.log('cb1') u stek poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
14) Naredba console.log('cb1') se izvr\u0161ava.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
15) Naredba console.log('cb1') uklanja se iz steka poziva.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
16) Funkcija cb1 se uklanja iz stoga poziva.<\/p>\n
<\/p>\n
Pogledajmo primer u dinamici:<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
Evo kako smo obradili asinkronost u JavaScript-u. Sada hajde da ukratko razgovaramo o evoluciji asinkronog koda.<\/p>\n
<\/p>\n
Evolucija asinkronog koda.<\/h2>\n
<\/p>\n
a(function (resultsFromA) {\n    b(resultsFromA, function (resultsFromB) {\n        c(resultsFromB, function (resultsFromC) {\n            d(resultsFromC, function (resultsFromD) {\n                e(resultsFromD, function (resultsFromE) {\n                    f(resultsFromE, function (resultsFromF) {\n                        console.log(resultsFromF);\n                    })\n                })\n            })\n        })\n    })\n});<\/code><\/pre>\n
<\/p>\n
Asinkrono programiranje, kakvo ga poznajemo u JavaScript-u, mo\u017ee se realizovati samo funkcijama. One se mogu preneti kao bilo koja druga promenljiva drugim funkcijama. Tako su ro\u0111eni povratni pozivi. I to je zabavno i veselo, sve dok se ne pretvori u tugu i jad. Za\u0161to? Zato \u0161to:<\/p>\n
<\/p>\n