{"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\/et\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"As\u00fcnkroonne programmeerimine JavaScriptis. (Tagasiside, Lubadus, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Tere k\u00f5igile. Siin on Omelnitski Sergei. Hiljuti viisin l\u00e4bi voogedastuse reaktiivprogrammeerimise kohta, kus r\u00e4\u00e4kisin as\u00fcnkroonsusest JavaScriptis. T\u00e4na tahaksin selle materjali kokku v\u00f5tta. <\/p>\n

<\/p>\n

\"As\u00fcnkroonne<\/p>\n

<\/p>\n

Kuid enne, kui alustame p\u00f5hiteemat, peame tegema sissejuhatuse. Niisiis, alustame m\u00e4\u00e4ratlemisest: mis on virn ja j\u00e4rjekord?
\nVirn <\/strong>on kogum, mille elemendid saavad p\u00f5hinedes \"viimane sisse, first out\" LIFO
\nJ\u00e4rjekord <\/strong>on kogum, mille elemendid saavad p\u00f5hinedes \"esimene sisse, esimene v\u00e4lja\" FIFO<\/p>\n

<\/p>\n

Selge, j\u00e4tkame. <\/p>\n

<\/p>\n

\"As\u00fcnkroonne<\/p>\n

<\/p>\n

JavaScript on \u00fchetine programmeerimiskeel. See t\u00e4hendab, et seal on ainult \u00fcks teostusniit ja \u00fcks virn, kuhu funktsioonid pandakse t\u00e4itmiseks j\u00e4rjekorda. Seega saab JavaScript korraga teostada ainult \u00fchte operatsiooni, teised operatsioonid peavad oma j\u00e4rjekorda ootama virnas, kuni neid kutsutakse. <\/p>\n

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

Kutsumisvirn<\/strong> on andmestruktuur, mis lihtsustatult \u00f6eldes salvestab teavet selle kohta, kus me programmis asume. Kui me liigume funktsiooni, paneme selle kirje virna \u00fclempoolsesse ossa. Kui me funktsioonist tagasi tuleme, t\u00f5mbame virnast k\u00f5ige \u00fclemise elemendi ja j\u00f5uame sinna, kust seda funktsiooni kutsuti. See on k\u00f5ik, mida virn suudab. N\u00fc\u00fcd on v\u00e4ga huvitav k\u00fcsimus. Kuidas siis t\u00f6\u00f6tab as\u00fcnkroonsus JavaScriptis?<\/p>\n

<\/p>\n

\"As\u00fcnkroonne<\/p>\n

<\/p>\n

Tegelikult on peale virna brauserites olemas ka eriline j\u00e4rjekord, kus t\u00f6\u00f6tab nn WebAPI. Funktsioonid sellest j\u00e4rjekorrast t\u00e4idetakse j\u00e4rjestikku ainult p\u00e4rast seda, kui virn on t\u00e4ielikult t\u00fchjaks tehtud. Alles p\u00e4rast seda paigutatakse need j\u00e4rjekorrast virna t\u00e4itmiseks. Kui virnas on v\u00e4hemalt \u00fcks element, siis nad ei saa virna siseneda. Just seet\u00f5ttu on funktsioonide kutsumine ajavahemiku j\u00e4rgi tihti ajaliselt ebat\u00e4pne, kuna funktsioon ei saa p\u00e4\u00e4seda j\u00e4rjekorrast virna, kuni see on t\u00e4is. <\/p>\n

<\/p>\n

Vaatame j\u00e4rgmine n\u00e4ide ja tegeleme selle samm-sammult \"teostamisega\". Samuti uurime, mis s\u00fcsteemis sellega toimub.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
1) Seni ei toimu midagi. Brauseri konsool on puhas, kutsumisvirn on t\u00fchi.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
2) Siis lisatakse k\u00e4sk console.log('Hi') kutsumisekuhku.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
3) Ja see t\u00e4idetakse<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
4) Seej\u00e4rel eemaldatakse console.log('Hi') kutsumisekuhust.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
5) N\u00fc\u00fcd liikume k\u00e4su setTimeout(function cb1() {\u2026 }) juurde. See lisatakse kutsumissteigi.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
6) K\u00e4sk setTimeout(function cb1() {\u2026 }) t\u00e4idetakse. Brauser loob taimeri, mis on osa Web API-st. See hakkab ajaloos tagasi lugema.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
7) K\u00e4sk setTimeout(function cb1() {\u2026 }) l\u00f5petab t\u00f6\u00f6 ja eemaldatakse kutsumissteigist.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
8) K\u00e4sk console.log('Bye') lisatakse kutsumisekuhku.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
9) K\u00e4sk console.log('Bye') t\u00e4idetakse.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
10) K\u00e4sk console.log('Bye') eemaldatakse kutsumisekuhust.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
11) P\u00e4rast v\u00e4hemalt 5000 ms m\u00f6\u00f6dumist, taimer l\u00f5petab t\u00f6\u00f6 ja paneb kolmanda argumendi cb1 tagumise j\u00e4rjekorda.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
12) \u00dcrituste ts\u00fckkel v\u00f5tab funktsiooni cb1 tagumisest j\u00e4rjekorrast ja paneb selle kutsumissteigi.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
13) Funktsioon cb1 t\u00e4idetakse ja lisab console.log('cb1') kutsumisekuhku.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
14) K\u00e4sk console.log('cb1') t\u00e4idetakse.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
15) K\u00e4sk console.log('cb1') eemaldatakse kutsumisekuhust.<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
16) Funktsioon cb1 eemaldatakse kutsumissteigist.<\/p>\n
<\/p>\n
Vaadakem n\u00e4idet d\u00fcnaamikas:<\/p>\n
<\/p>\n
\"As\u00fcnkroonne<\/p>\n
<\/p>\n
Noh, oleme uurinud, kuidas JavaScriptis as\u00fcnkroonsus t\u00f6\u00f6tab. N\u00fc\u00fcd r\u00e4\u00e4gime l\u00fchidalt as\u00fcnkroonse koodi arengust.<\/p>\n
<\/p>\n
As\u00fcnkroonse koodi areng.<\/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
As\u00fcnkroonne programmeerimine, nagu me seda JavaScripts tunneme, saab teostada ainult funktsioonidega. Need v\u00f5ivad olla edastatud nagu iga teine muutuja teistele funktsioonidele. Nii s\u00fcndisid tagasikutsed. Ja see on lahe, l\u00f5bus ja energiline, kuni see muutub kurvaks, igavaks ja masendavaks. Miks? Lihtsalt:<\/p>\n
<\/p>\n