{"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\/cs\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asynchronn\u00ed programov\u00e1n\u00ed v JavaScriptu. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ahoj v\u0161em. Tady je Sergej Omelnytsky. Ned\u00e1vno jsem vedl stream o reaktivn\u00edm programov\u00e1n\u00ed, kde jsem hovo\u0159il o asynchronnosti v JavaScriptu. Dnes bych cht\u011bl shrnout tento materi\u00e1l. <\/p>\n

<\/p>\n

\"Asynchronn\u00ed<\/p>\n

<\/p>\n

Ale p\u0159edt\u00edm, ne\u017e za\u010dneme s hlavn\u00edm materi\u00e1lem, je pot\u0159eba ud\u011blat \u00favod. Tak poj\u010fme za\u010d\u00edt s definicemi: co je to z\u00e1sobn\u00edk a fronta?
\nZ\u00e1sobn\u00edk <\/strong>\u2014 to je kolekce, jej\u00ed\u017e prvky jsou vyb\u00edr\u00e1ny podle principu \u201eposledn\u00ed p\u0159i\u0161el, prvn\u00ed ode\u0161el\u201c LIFO.
\nFronta <\/strong>\u2014 to je kolekce, jej\u00ed\u017e prvky jsou vyb\u00edr\u00e1ny podle principu \u201eprvn\u00ed p\u0159i\u0161el, prvn\u00ed ode\u0161el\u201c FIFO.<\/p>\n

<\/p>\n

Dob\u0159e, pokra\u010dujme. <\/p>\n

<\/p>\n

\"Asynchronn\u00ed<\/p>\n

<\/p>\n

JavaScript je jednoproduktov\u00fd programovac\u00ed jazyk. To znamen\u00e1, \u017ee m\u00e1 pouze jeden vykon\u00e1vac\u00ed vl\u00e1knov\u00fd tok a jeden z\u00e1sobn\u00edk, do kter\u00e9ho se funkce ukl\u00e1daj\u00ed do fronty k vykon\u00e1n\u00ed. Proto m\u016f\u017ee JavaScript v jeden okam\u017eik vykonat pouze jednu operaci, jin\u00e9 operace na to \u010dekaj\u00ed ve front\u011b, dokud nejsou vyvol\u00e1ny. <\/p>\n

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

Z\u00e1sobn\u00edk vol\u00e1n\u00ed<\/strong> \u2014 to je datov\u00e1 struktura, kter\u00e1, zjednodu\u0161en\u011b \u0159e\u010deno, zapisuje informace o m\u00edst\u011b v programu, kde se nach\u00e1z\u00edme. Kdy\u017e p\u0159ejdeme do funkce, um\u00edst\u00edme z\u00e1znam o n\u00ed na vrchol z\u00e1sobn\u00edku. Kdy\u017e se z funkce vrac\u00edme, vyt\u00e1hneme z\u00e1znam z vrchn\u00ed \u010d\u00e1sti z\u00e1sobn\u00edku a ocitneme se tam, odkud byla tato funkce vyvol\u00e1na. To je v\u0161e, co z\u00e1sobn\u00edk d\u011bl\u00e1. A te\u010f vzru\u0161uj\u00edc\u00ed ot\u00e1zka. Jak tedy funguje asynchronnost v JavaScriptu?<\/p>\n

<\/p>\n

\"Asynchronn\u00ed<\/p>\n

<\/p>\n

Ve skute\u010dnosti, krom\u011b z\u00e1sobn\u00edku, maj\u00ed prohl\u00ed\u017ee\u010de speci\u00e1ln\u00ed frontu pro pr\u00e1ci s takzvan\u00fdm WebAPI. Funkce z t\u00e9to fronty se vykon\u00e1vaj\u00ed v po\u0159ad\u00ed, a\u017e kdy\u017e je z\u00e1sobn\u00edk \u00fapln\u011b vypr\u00e1zdn\u011bn. A\u017e pak jsou um\u00edst\u011bny do z\u00e1sobn\u00edku k vykon\u00e1n\u00ed. Pokud je v z\u00e1sobn\u00edku v sou\u010dasnosti alespo\u0148 jeden prvek, nemohou do z\u00e1sobn\u00edku vstoupit. Pr\u00e1v\u011b z tohoto d\u016fvodu b\u00fdv\u00e1 vol\u00e1n\u00ed funkc\u00ed pomoc\u00ed timeru \u010dasto \u010dasov\u011b nep\u0159esn\u00e9, proto\u017ee funkce nem\u016f\u017ee vstoupit do z\u00e1sobn\u00edku, dokud je ten pln\u00fd. <\/p>\n

<\/p>\n

Pod\u00edvejme se na n\u00e1sleduj\u00edc\u00ed p\u0159\u00edklad a zab\u00fdvejme se jeho krokov\u00fdm \u201evykon\u00e1n\u00edm\u201c. Tak\u00e9 se pod\u00edvejme, co se v syst\u00e9mu sou\u010dasn\u011b d\u011bje.<\/p>\n

<\/p>\n

console.log('Ahoj');\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Ahoj');<\/code><\/pre>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
1) Zat\u00edm se nic ned\u011bje. Konzole prohl\u00ed\u017ee\u010de je pr\u00e1zdn\u00e1, z\u00e1sobn\u00edk vol\u00e1n\u00ed je pr\u00e1zdn\u00fd.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
2) Pot\u00e9 se p\u0159\u00edkaz console.log('Ahoj') p\u0159id\u00e1 na z\u00e1sobn\u00edk vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
3) A ona se prov\u00e1d\u00ed<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
4) N\u00e1sledn\u011b se console.log('Ahoj') odstran\u00ed ze z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
5) Nyn\u00ed p\u0159ejdeme k p\u0159\u00edkazu setTimeout(function cb1() {\u2026 }). Ten je p\u0159id\u00e1n do z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
6) P\u0159\u00edkaz setTimeout(function cb1() {\u2026 }) se prov\u00e1d\u00ed. Prohl\u00ed\u017ee\u010d vytvo\u0159\u00ed \u010dasova\u010d, kter\u00fd je sou\u010d\u00e1st\u00ed Web API. Bude prov\u00e1d\u011bt odpo\u010det.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
7) P\u0159\u00edkaz setTimeout(function cb1() {\u2026 }) dokon\u010dil svou \u010dinnost a je odstran\u011bn ze z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
8) P\u0159\u00edkaz console.log('Sbohem') se p\u0159id\u00e1 na z\u00e1sobn\u00edk vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
9) P\u0159\u00edkaz console.log('Sbohem') se vykon\u00e1v\u00e1.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
10) P\u0159\u00edkaz console.log('Sbohem') se odstran\u00ed ze z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
11) Jakmile uplyne alespo\u0148 5000 ms, \u010dasova\u010d dokon\u010d\u00ed svou \u010dinnost a um\u00edst\u00ed callback cb1 do fronty callback\u016f.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
12) Cyklus ud\u00e1lost\u00ed vezme funkci cb1 z fronty callback\u016f a um\u00edst\u00ed ji do z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
13) Funkce cb1 se vykon\u00e1v\u00e1 a p\u0159id\u00e1v\u00e1 console.log('cb1') na z\u00e1sobn\u00edk vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
14) P\u0159\u00edkaz console.log('cb1') se vykon\u00e1v\u00e1.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
15) P\u0159\u00edkaz console.log('cb1') se odstran\u00ed ze z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
16) Funkce cb1 je odstran\u011bna ze z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
<\/p>\n
Pod\u00edvejme se na p\u0159\u00edklad v dynamice:<\/p>\n
<\/p>\n
\"Asynchronn\u00ed<\/p>\n
<\/p>\n
Tak a m\u00e1me za sebou, jak je v JavaScriptu realizov\u00e1na asynchronnost. Te\u010f si stru\u010dn\u011b promluvme o evoluci asynchronn\u00edho k\u00f3du.<\/p>\n
<\/p>\n
Evoluce asynchronn\u00edho 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
Asynchronn\u00ed programov\u00e1n\u00ed, jak ho zn\u00e1me v JavaScriptu, m\u016f\u017ee b\u00fdt realizov\u00e1no pouze pomoc\u00ed funkc\u00ed. Ty mohou b\u00fdt p\u0159ed\u00e1v\u00e1ny jako jak\u00e1koliv jin\u00e1 prom\u011bnn\u00e1 dal\u0161\u00edm funkc\u00edm. Tak se zrodily callbacky. A je to skv\u011bl\u00e9, z\u00e1bavn\u00e9 a vesel\u00e9, dokud se to neprom\u011bn\u00ed v smutek, l\u00edtost a z\u00e1rmutek. Pro\u010d? Odpov\u011b\u010f je jednoduch\u00e1:<\/p>\n
<\/p>\n