{"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\/sk\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asynchr\u00f3nne programovanie v JavaScripte. ( Callback, Promise, RxJs )","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ahoj v\u0161etci. Tu je Omelnytskyi Serhii. Ned\u00e1vno som mal live stream o reakt\u00edvnom programovan\u00ed, kde som rozpr\u00e1val o asynchr\u00f3nnosti v JavaScripte. Dnes by som chcel zhrn\u00fa\u0165 tento materi\u00e1l. <\/p>\n

<\/p>\n

\"Asynchr\u00f3nne<\/p>\n

<\/p>\n

Ale predt\u00fdm, ako za\u010dneme s hlavn\u00fdm materi\u00e1lom, mus\u00edme urobi\u0165 \u00favod. Po\u010fme si teda najprv definova\u0165, \u010do je z\u00e1sobn\u00edk a fronta?
\nZ\u00e1sobn\u00edk <\/strong>je kolekcia, z ktorej s\u00fa prvky vyberan\u00e9 pod\u013ea princ\u00edpu \u201eposledn\u00fd dodal, prv\u00fd vytiahnut\u00fd\u201c LIFO.
\nFronta <\/strong>je kolekcia, z ktorej s\u00fa prvky vyberan\u00e9 pod\u013ea princ\u00edpu \u201eprv\u00fd dodal, prv\u00fd vytiahnut\u00fd\u201c FIFO.<\/p>\n

<\/p>\n

Dobre, pokra\u010dujeme. <\/p>\n

<\/p>\n

\"Asynchr\u00f3nne<\/p>\n

<\/p>\n

JavaScript je jednoprev\u00e1dzkov\u00fd programovac\u00ed jazyk. To znamen\u00e1, \u017ee m\u00e1 iba jeden tok vykon\u00e1vania a jeden z\u00e1sobn\u00edk, do ktor\u00e9ho s\u00fa funkcie umiest\u0148ovan\u00e9 na vykonanie. Preto m\u00f4\u017ee JavaScript v jeden moment vykona\u0165 iba jednu oper\u00e1ciu, ostatn\u00e9 oper\u00e1cie bud\u00fa \u010daka\u0165 na svoju rad v z\u00e1sobn\u00edku, k\u00fdm nebud\u00fa vyvolan\u00e9. <\/p>\n

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

Z\u00e1sobn\u00edk volan\u00ed<\/strong> je \u0161trukt\u00fara \u00fadajov, ktor\u00e1, zjednodu\u0161ene povedan\u00e9, zaznamen\u00e1va inform\u00e1cie o tom, kde sa nach\u00e1dzame v programe. Ke\u010f prech\u00e1dzame do funkcie, prid\u00e1me z\u00e1znam o nej na vrchol z\u00e1sobn\u00edka. Ke\u010f sa vraciame z funkcie, vytiahneme z najvrchnej\u0161ieho prvku z\u00e1sobn\u00edka a ocitneme sa tam, odkia\u013e sme t\u00fato funkciu volali. To je v\u0161etko, \u010do z\u00e1sobn\u00edk dok\u00e1\u017ee. A teraz ve\u013emi zauj\u00edmav\u00e1 ot\u00e1zka. Ako teda funguje asynchr\u00f3nnos\u0165 v JavaScript-e?<\/p>\n

<\/p>\n

\"Asynchr\u00f3nne<\/p>\n

<\/p>\n

V skuto\u010dnosti okrem z\u00e1sobn\u00edka existuje v prehliada\u010doch \u0161peci\u00e1lna fronta na pr\u00e1cu s takzvan\u00fdm WebAPI. Funkcie z tejto fronty sa vykonaj\u00fa postupne a\u017e po \u00faplnom vy\u010disten\u00ed z\u00e1sobn\u00edka. A\u017e potom s\u00fa presunut\u00e9 z fronty do z\u00e1sobn\u00edka na vykonanie. Ak je v z\u00e1sobn\u00edku aspo\u0148 jeden prvok, funkcie nem\u00f4\u017eu vst\u00fapi\u0165 do z\u00e1sobn\u00edka. Presne z tohto d\u00f4vodu je vyvolanie funkci\u00ed po timeout-e \u010dasto \u010dasovo nepresn\u00e9, preto\u017ee funkcia nem\u00f4\u017ee vst\u00fapi\u0165 z fronty do z\u00e1sobn\u00edka, k\u00fdm je ten pln\u00fd. <\/p>\n

<\/p>\n

Pozrime sa na nasleduj\u00faci pr\u00edklad a zaobera\u0165 sa jeho krokov\u00fdm \u201evykonan\u00edm\u201c. Taktie\u017e presk\u00famame, \u010do sa dej\u00fa v syst\u00e9me.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
1) Zatia\u013e sa ni\u010d nedeje. Konzola prehliada\u010da je pr\u00e1zdna, z\u00e1sobn\u00edk volan\u00ed je pr\u00e1zdny.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
2) Potom sa pr\u00edkaz console.log(\u2018Hi\u2019) prid\u00e1va do z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
3) A on sa vykon\u00e1va<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
4) Potom sa pr\u00edkaz console.log(\u2018Hi\u2019) odstra\u0148uje zo z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
5) Teraz prech\u00e1dzame k pr\u00edkazu setTimeout(function cb1() {\u2026 }). Ten sa prid\u00e1va do z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
6) Pr\u00edkaz setTimeout(function cb1() {\u2026 }) sa vykon\u00e1va. Prehliada\u010d vytv\u00e1ra \u010dasova\u010d, ktor\u00fd je s\u00fa\u010das\u0165ou Web API. Ten za\u010dne odpo\u010d\u00edtava\u0165 \u010das.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
7) Pr\u00edkaz setTimeout(function cb1() {\u2026 }) ukon\u010dil svoju pr\u00e1cu a odstr\u00e1ni sa z z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
8) Pr\u00edkaz console.log(\u2018Bye\u2019) sa prid\u00e1va do z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
9) Pr\u00edkaz console.log(\u2018Bye\u2019) sa vykon\u00e1va.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
10) Pr\u00edkaz console.log(\u2018Bye\u2019) sa odstra\u0148uje zo z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
11) Ke\u010f uplyn\u00fa minim\u00e1lne 5000 ms, \u010dasova\u010d ukon\u010d\u00ed svoju pr\u00e1cu a umiestni kolbek cb1 do fronty kolbekov.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
12) Cykel udalost\u00ed zoberie funkciu cb1 z fronty kolbekov a umiestni ju do z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
13) Funkcia cb1 sa vykon\u00e1va a prid\u00e1va pr\u00edkaz console.log(\u2018cb1\u2019) do z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
14) Pr\u00edkaz console.log(\u2018cb1\u2019) sa vykon\u00e1va.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
15) Pr\u00edkaz console.log(\u2018cb1\u2019) sa odstra\u0148uje zo z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
16) Funkcia cb1 sa odstr\u00e1ni zo z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
<\/p>\n
Pozrime sa na pr\u00edklad v dynamike:<\/p>\n
<\/p>\n
\"Asynchr\u00f3nne<\/p>\n
<\/p>\n
Tak sme si pre\u0161li, ako je v JavaScripte implementovan\u00e1 asynchr\u00f3nnos\u0165. Teraz si stru\u010dne po\u010fme pop\u00eds\u0165 evol\u00faciu asynchr\u00f3nneho k\u00f3du.<\/p>\n
<\/p>\n
Evol\u00facia asynchr\u00f3nneho k\u00f3du.<\/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
Asynchr\u00f3nne programovanie, ak\u00e9 pozn\u00e1me v JavaScripte, m\u00f4\u017ee by\u0165 realizovan\u00e9 iba pomocou funkci\u00ed. M\u00f4\u017eu by\u0165 pren\u00e1\u0161an\u00e9 ako ak\u00e1ko\u013evek in\u00e1 premenn\u00e1 in\u00fdm funkci\u00e1m. Tak sa zrodili kolbky. A je to fajn, z\u00e1bavn\u00e9 a vzru\u0161uj\u00face, k\u00fdm sa to nepretransformuje na sm\u00fatenie a z\u00fafalstvo. Pre\u010do? Je to jednoduch\u00e9:<\/p>\n
<\/p>\n