{"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\/lv\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asinhron\u0101 programm\u0113\u0161ana JavaScript. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Sveiki visiem. \u0160eit ir Ome\u013c\u0146ickis Sergejs. Pirms neilga laika es vad\u012bju straumi par reakt\u012bvo programm\u0113\u0161anu, kur run\u0101ju par asynchronit\u0101ti JavaScript. \u0160odien es gribu apkopot \u0161o materi\u0101lu. <\/p>\n

<\/p>\n

\"Asinhron\u0101<\/p>\n

<\/p>\n

Bet pirms \u0137eramies pie galven\u0101 materi\u0101la, mums ir j\u0101dara ievads. T\u0101tad, s\u0101ksim ar defin\u012bcij\u0101m: kas ir staks un rinda?
\nStaks <\/strong>\u2014 tas ir kolekcija, kuras elementi tiek ieg\u016bti saska\u0146\u0101 ar principu \u00abp\u0113d\u0113jais n\u0101ca, pirmais izg\u0101ja\u00bb LIFO
\nRinda <\/strong>\u2014 tas ir kolekcija, kuras elementi tiek ieg\u016bti saska\u0146\u0101 ar principu \u00abpirmais n\u0101ca, pirmais izg\u0101ja\u00bb FIFO<\/p>\n

<\/p>\n

OK, turpin\u0101sim. <\/p>\n

<\/p>\n

\"Asinhron\u0101<\/p>\n

<\/p>\n

JavaScript ir vienapstr\u0101des programm\u0113\u0161anas valoda. Tas noz\u012bm\u0113, ka eksist\u0113 tikai viena izpildes pl\u016bsma un viens staks, kur\u0101 funkcijas tiek ievietotas izpildei. T\u0101d\u0113j\u0101di vienlaic\u012bgi JavaScript var izpild\u012bt tikai vienu darb\u012bbu, bet p\u0101r\u0113j\u0101s darb\u012bbas gaid\u012bs savu k\u0101rtu stak\u0101, l\u012bdz t\u0101s tiks izsauktas. <\/p>\n

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

Izsaukumu staks<\/strong> \u2014 t\u0101 ir datu strukt\u016bra, kas, vienk\u0101r\u0161oti run\u0101jot, ieraksta inform\u0101ciju par to, kur programm\u0101 atrodamies. Ja m\u0113s p\u0101rejam uz funkciju, m\u0113s ievietojam ierakstu par to staka aug\u0161pus\u0113. Kad m\u0113s no funkcijas atgrie\u017eamies, m\u0113s iz\u0146emam no staka aug\u0161\u0113jo elementu un non\u0101kam tur, no kurienes izsauc\u0101m \u0161o funkciju. Tas ir viss, ko var dar\u012bt staks. Bet tagad \u013coti interesants jaut\u0101jums. K\u0101 tad darbojas asynchronit\u0101te JavaScript?<\/p>\n

<\/p>\n

\"Asinhron\u0101<\/p>\n

<\/p>\n

Paties\u012bb\u0101, iz\u0146emot staku, p\u0101rl\u016bkprogramm\u0101s ir \u012bpa\u0161a rinda, kas darbojas ar t\u0101 saukto WebAPI. Funkcijas no \u0161\u012bs rindas tiks izpild\u012btas sec\u012bgi tikai p\u0113c tam, kad staks b\u016bs piln\u012bb\u0101 not\u012br\u012bts. Tikai p\u0113c tam t\u0101s tiek ievietotas no rindas stak\u0101 izpildei. Ja stak\u0101 patlaban ir vismaz viens elements, tad t\u0101s nevar iek\u013c\u016bt stak\u0101. Tie\u0161i t\u0101p\u0113c funkciju izsaukumi ar taimeri bie\u017ei ir neprec\u012bzi laik\u0101, jo funkcija nevar iek\u013c\u016bt stak\u0101, kam\u0113r tas ir piepild\u012bts. <\/p>\n

<\/p>\n

Apskat\u012bsim n\u0101kamo piem\u0113ru un veiksim t\u0101 so\u013cveida \u00abizpildi\u00bb. Ar\u012b apskat\u012bsim, kas notiek sist\u0113m\u0101.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
1) Pa\u0161laik nekas nenotiek. P\u0101rl\u016bka konsole ir t\u012bra, izsaukumu staks ir tuk\u0161s.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
2) P\u0113c tam komanda console.log(‘Hi’) tiek pievienota izsaukumu stakam.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
3) Un t\u0101 tiek izpild\u012bta<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
4) Tad console.log('Hi') tiek no\u0146emts no izsaukumu steka.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
5) Tagad p\u0101rej\u0101m pie komandas setTimeout(function cb1() {\u2026 }). T\u0101 tiek pievienota izsaukumu stekam.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
6) Komanda setTimeout(function cb1() {\u2026 }) tiek izpild\u012bta. P\u0101rl\u016bkprogramma izveido taimeri, kas ir da\u013ca no Web API. Tas veiks laika atskaiti.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
7) Komanda setTimeout(function cb1() {\u2026 }) ir pabeigusi darbu un tiek no\u0146emta no izsaukumu steka.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
8) Komanda console.log('Bye') tiek pievienota izsaukumu stekam.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
9) Komanda console.log('Bye') tiek izpild\u012bta.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
10) Komanda console.log('Bye') tiek no\u0146emta no izsaukumu steka.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
11) P\u0113c tam, kad ir pag\u0101ju\u0161i vismaz 5000 ms., taimeris pabeidz darbu un ievieto atgriezenisko saiti cb1 atgriezenisko zvanu rind\u0101.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
12) Notikumu cikls \u0146em funkciju cb1 no atgriezenisko zvanu rindas un ievieto to izsaukumu stek\u0101.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
13) Funkcija cb1 tiek izpild\u012bta un pievieno console.log('cb1') izsaukumu stekam.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
14) Komanda console.log('cb1') tiek izpild\u012bta.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
15) Komanda console.log('cb1') tiek no\u0146emta no izsaukumu steka.<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
16) Funkcija cb1 tiek no\u0146emta no izsaukumu steka.<\/p>\n
<\/p>\n
Paskat\u012bsimies uz piem\u0113ru dinamisk\u0101 veid\u0101:<\/p>\n
<\/p>\n
\"Asinhron\u0101<\/p>\n
<\/p>\n
T\u0101tad m\u0113s esam apskat\u012bju\u0161i, k\u0101 JavaScript \u012bsteno asinkroniju. Tagad \u012bsi parun\u0101sim par asinkron\u0101 koda evolucion\u0101.<\/p>\n
<\/p>\n
Asinkron\u0101 koda evol\u016bcija.<\/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
Asinkron\u0101 programm\u0113\u0161ana, k\u0101du m\u0113s to paz\u012bstam JavaScript, var tikt \u012bstenota tikai ar funkcij\u0101m. T\u0101s var tikt nodotas k\u0101 jebkura cita main\u012bg\u0101 cit\u0101m funkcij\u0101m. T\u0101d\u0101 veid\u0101 rad\u0101s atgriezenisk\u0101s saites. Un tas ir for\u0161i, jautri un dz\u012bv\u012bgi, kam\u0113r tas nenon\u0101k skumj\u0101s, b\u0113d\u0101s un raud\u0101\u0161an\u0101. K\u0101p\u0113c? Viss ir vienk\u0101r\u0161i:<\/p>\n
<\/p>\n