{"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\/hu\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Aszinkron programoz\u00e1s JavaScript-ben. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Hell\u00f3 mindenkinek. Omelnicki Szergej vagyok. Nemr\u00e9giben egy k\u00f6zvet\u00edt\u00e9st tartottam az aszinkron programoz\u00e1sr\u00f3l, ahol a JavaScript aszinkronit\u00e1s\u00e1r\u00f3l besz\u00e9ltem. Ma szeretn\u00e9m \u00f6sszefoglalni ezt az anyagot. <\/p>\n

<\/p>\n

\"Aszinkron<\/p>\n

<\/p>\n

De miel\u0151tt elkezden\u00e9nk a f\u0151 anyagot, sz\u00fcks\u00e9g\u00fcnk van egy bevezet\u00e9sre. Teh\u00e1t kezdj\u00fck a defin\u00edci\u00f3kkal: mi is az a verem \u00e9s a sor?
\nVerem <\/strong>\u2014 ez egy olyan gy\u0171jtem\u00e9ny, amelyb\u0151l az elemek a 'legutols\u00f3, aki bel\u00e9pett, az els\u0151, aki t\u00e1vozik' elv szerint ker\u00fclnek ki (LIFO).
\nSor <\/strong>\u2014 ez egy olyan gy\u0171jtem\u00e9ny, amelyb\u0151l az elemek a 'legels\u0151, aki bel\u00e9pett, az els\u0151, aki t\u00e1vozik' elv szerint ker\u00fclnek ki (FIFO).<\/p>\n

<\/p>\n

Rendben, folytassuk. <\/p>\n

<\/p>\n

\"Aszinkron<\/p>\n

<\/p>\n

A JavaScript egy egysz\u00e1l\u00fa programoz\u00e1si nyelv. Ez azt jelenti, hogy csak egy v\u00e9grehajt\u00e1si sz\u00e1la \u00e9s egy verem van, amelybe a funkci\u00f3k a v\u00e9grehajt\u00e1sra v\u00e1rnak. Teh\u00e1t egy adott id\u0151ben a JavaScript csak egy m\u0171veletet hajthat v\u00e9gre, a t\u00f6bbi m\u0171velet a veremben v\u00e1rakozik, am\u00edg nem h\u00edvj\u00e1k \u0151ket. <\/p>\n

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

H\u00edv\u00e1sverem<\/strong> \u2014 ez egy adatstrukt\u00fara, amely leegyszer\u0171s\u00edtve feljegyzi a programban a helyet, ahol \u00e9ppen vagyunk. Amikor egy funkci\u00f3ba l\u00e9p\u00fcnk, feljegyk\u00e9nt ker\u00fcl a verem tetej\u00e9re. Amikor visszat\u00e9r\u00fcnk a funkci\u00f3b\u00f3l, elt\u00e1vol\u00edtjuk a veremb\u0151l a legfels\u0151 elemet, \u00e9s ott tal\u00e1ljuk magunkat, ahonnan a funkci\u00f3t h\u00edvtuk. Ez a verem egyetlen k\u00e9pess\u00e9ge. \u00c9s most egy rendk\u00edv\u00fcl \u00e9rdekes k\u00e9rd\u00e9s. Hogyan m\u0171k\u00f6dik akkor az aszinkronit\u00e1s a JavaScript-ben?<\/p>\n

<\/p>\n

\"Aszinkron<\/p>\n

<\/p>\n

Val\u00f3j\u00e1ban a b\u00f6ng\u00e9sz\u0151kben a verem mellett l\u00e9tezik egy k\u00fcl\u00f6n sor, amely a WebAPI m\u0171k\u00f6d\u00e9s\u00e9hez sz\u00fcks\u00e9ges. A sorban l\u00e9v\u0151 funkci\u00f3k v\u00e9grehajt\u00e1sa azut\u00e1n t\u00f6rt\u00e9nik meg sorrendben, hogy a verem teljesen ki\u00fcr\u00fclt. Csak ezut\u00e1n helyezhet\u0151ek \u00e1t a sorb\u00f3l a verembe a v\u00e9grehajt\u00e1sra. Ha a veremben jelenleg van legal\u00e1bb egy elem, akkor az \u00faj elemek nem ker\u00fclhetnek a verembe. Ez az oka annak, hogy a timeout h\u00edv\u00e1sok gyakran pontatlan id\u0151ben t\u00f6rt\u00e9nnek, mivel a funkci\u00f3 nem tud \u00e1tl\u00e9pni a sorb\u00f3l a verembe, am\u00edg az tele van. <\/p>\n

<\/p>\n

N\u00e9zz\u00fck meg a k\u00f6vetkez\u0151 p\u00e9ld\u00e1t \u00e9s foglalkozzunk annak l\u00e9p\u00e9sr\u0151l l\u00e9p\u00e9sre t\u00f6rt\u00e9n\u0151 'v\u00e9grehajt\u00e1s\u00e1val'. Emellett n\u00e9zz\u00fck meg, mi t\u00f6rt\u00e9nik a rendszerben.<\/p>\n

<\/p>\n

console.log('Hi');\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
1) Jelenleg semmi sem t\u00f6rt\u00e9nik. A b\u00f6ng\u00e9sz\u0151 konzolja tiszta, a h\u00edv\u00e1sverem \u00fcres.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
2) Ezut\u00e1n a console.log(‘Hi’) a h\u00edv\u00e1si veremben helyezkedik el.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
3) \u00c9s v\u00e9grehajt\u00f3dik.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
4) Ezt k\u00f6vet\u0151en a console.log(‘Hi’) elt\u00e1vol\u00edt\u00e1sra ker\u00fcl a h\u00edv\u00e1si veremb\u0151l.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
5) Most folytatjuk a setTimeout(function cb1() {\u2026 }) parancsra. Ez hozz\u00e1ad\u00f3dik a h\u00edv\u00e1si veremhez.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
6) A setTimeout(function cb1() {\u2026 }) parancs v\u00e9grehajt\u00f3dik. A b\u00f6ng\u00e9sz\u0151 l\u00e9trehoz egy id\u0151z\u00edt\u0151t, amely a Web API r\u00e9sze. Ez elind\u00edtja az id\u0151 visszasz\u00e1ml\u00e1l\u00e1s\u00e1t.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
7) A setTimeout(function cb1() {\u2026 }) parancs befejez\u0151dik \u00e9s elt\u00e1vol\u00edt\u00f3dik a h\u00edv\u00e1si veremb\u0151l.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
8) A console.log(‘Bye’) parancs a h\u00edv\u00e1si veremben helyezkedik el.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
9) A console.log(‘Bye’) parancs v\u00e9grehajt\u00e1sra ker\u00fcl.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
10) A console.log(‘Bye’) parancs elt\u00e1vol\u00edt\u00e1sra ker\u00fcl a h\u00edv\u00e1si veremb\u0151l.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
11) Miut\u00e1n eltelt legal\u00e1bb 5000 ms, az id\u0151z\u00edt\u0151 befejez\u0151dik \u00e9s a cb1 visszah\u00edv\u00e1st a visszah\u00edv\u00e1sok sor\u00e1ba helyezi.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
12) Az esem\u00e9nyhurok kiveszi a cb1 f\u00fcggv\u00e9nyt a visszah\u00edv\u00e1sok sor\u00e1b\u00f3l \u00e9s a h\u00edv\u00e1si verembe helyezi.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
13) A cb1 f\u00fcggv\u00e9ny v\u00e9grehajt\u00e1sra ker\u00fcl, \u00e9s a console.log(‘cb1’) a h\u00edv\u00e1si verembe ker\u00fcl.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
14) A console.log(‘cb1’) parancs v\u00e9grehajt\u00e1sra ker\u00fcl.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
15) A console.log(‘cb1’) parancs elt\u00e1vol\u00edt\u00e1sra ker\u00fcl a h\u00edv\u00e1si veremb\u0151l.<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
16) A cb1 f\u00fcggv\u00e9ny elt\u00e1vol\u00edt\u00f3dik a h\u00edv\u00e1si veremb\u0151l.<\/p>\n
<\/p>\n
N\u00e9zz\u00fck meg a p\u00e9ld\u00e1t dinamikusan:<\/p>\n
<\/p>\n
\"Aszinkron<\/p>\n
<\/p>\n
Most pedig \u00e1ttekintett\u00fck, hogyan val\u00f3sul meg az aszinkronit\u00e1s a JavaScript-ben. Besz\u00e9lj\u00fcnk r\u00f6viden az aszinkron k\u00f3d fejl\u0151d\u00e9s\u00e9r\u0151l.<\/p>\n
<\/p>\n
Az aszinkron k\u00f3d fejl\u0151d\u00e9se.<\/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
Az aszinkron programoz\u00e1s, amit a JavaScript-ben ismer\u00fcnk, csak f\u00fcggv\u00e9nyekkel val\u00f3s\u00edthat\u00f3 meg. Ezek m\u00e1s f\u00fcggv\u00e9nyeknek b\u00e1rmely m\u00e1s v\u00e1ltoz\u00f3k\u00e9nt \u00e1tadhat\u00f3ak. Itt sz\u00fclettek a visszah\u00edv\u00e1sok. \u00c9s ez sz\u00f3rakoztat\u00f3, vid\u00e1m, am\u00edg meg nem fordul a dolog, \u00e9s szomor\u00fas\u00e1gba nem torkollik. Mi\u00e9rt? Mert:<\/p>\n
<\/p>\n