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

Vsem pozdrav! Tukaj je Sergej Omelnitski. Nedavno sem imel prenos v \u017eivo o reaktivnem programiranju, kjer sem govoril o asinhronosti v JavaScriptu. Danes bi rad strnil to gradivo. <\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

Preden za\u010dnemo s glavnim gradivom, potrebujemo uvod. Torej, za\u010dnimo z definicijami: kaj je sklad in kaj je vrsta?
\nSklad <\/strong>je zbirka, katere elementi se obravnavajo po na\u010delu 'zadnji vstopil, prvi izstopil' LIFO.
\nVrsta <\/strong>je zbirka, katere elementi se obravnavajo po na\u010delu 'prvi vstopil, prvi izstopil' FIFO.<\/p>\n

<\/p>\n

Okej, nadaljujmo. <\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

JavaScript je enovreten programski jezik. To pomeni, da obstaja le en tok izvajanja in en sklad, v katerega se funkcije dodajajo v vrsto za izvajanje. Zato lahko JavaScript v enem trenutku izvede le eno operacijo, druge operacije pa \u010dakajo na vrsto v skladu, dokler niso poklicane. <\/p>\n

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

Sklad klicev<\/strong> je podatkovna struktura, ki, poenostavljeno povedano, zabele\u017ei informacije o tem, kje smo v programu. Ko preidemo v funkcijo, v zgornji del sklada dodamo zapis o njej. Ko se iz funkcije vrnemo, vzamemo iz sklada najvi\u0161ji element in se vrnemo tja, od koder smo klicali to funkcijo. To je vse, kar sklad zmore. In zdaj se pojavi zelo zanimivo vpra\u0161anje. Kako torej deluje asinhronost v JavaScriptu?<\/p>\n

<\/p>\n

\"Asinhrono<\/p>\n

<\/p>\n

Dejansko poleg sklada v brskalnikih obstaja posebna vrsta za delo s tako imenovanim WebAPI. Funkcije iz te vrste se izvr\u0161ijo po vrstnem redu \u0161ele po tem, ko je sklad popolnoma prazen. \u0160ele potem so premaknjene iz vrste v sklad za izvajanje. \u010ce je v skladu trenutno vsaj en element, potem ne morejo priti v sklad. Prav zato so klici funkcij z zamudo pogosto \u010dasovno neto\u010dni, ker funkcija ne more priti iz vrste v sklad, dokler je ta poln. <\/p>\n

<\/p>\n

Poglejmo naslednji primer in se ukvarjajmo z njegovim 'izvajanjem' korak za korakom. Poleg tega bomo pogledali, kaj se pri tem dogaja v sistemu.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
1) Na za\u010detku se ni\u010d ne dogaja. Konzola brskalnika je prazna, sklad klicev je prazen.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
2) Nato se ukaz console.log('Hi') doda v sklad klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
3) In se izvr\u0161i.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
4) Nato se ukaz console.log('Hi') odstrani iz sklada klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
5) Zdaj gremo na ukaz setTimeout(function cb1() {\u2026 }). Ta se doda v sklad klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
6) Ukaz setTimeout(function cb1() {\u2026 }) se izvr\u0161i. Brskalnik ustvari \u010dasovnik, ki je del Web API. Ta bo izvajal od\u0161tevanje \u010dasa.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
7) Ukaz setTimeout(function cb1() {\u2026 }) kon\u010da svoje delo in se odstrani iz sklada klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
8) Ukaz console.log('Bye') se doda v sklad klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
9) Ukaz console.log('Bye') se izvede.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
10) Ukaz console.log('Bye') se odstrani iz sklada klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
11) Ko mine vsaj 5000 ms, \u010dasovnik kon\u010da svoje delo in doda povratni klic cb1 v vrsto povratnih klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
12) Dogodkovna zanka vzame funkcijo cb1 iz vrste povratnih klicev in jo doda v sklad klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
13) Funkcija cb1 se izvede in doda ukaz console.log('cb1') v sklad klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
14) Ukaz console.log('cb1') se izvede.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
15) Ukaz console.log('cb1') se odstrani iz sklada klicev.<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
16) Funkcija cb1 se odstrani iz sklada klicev.<\/p>\n
<\/p>\n
Poglejmo primer v dinamiki:<\/p>\n
<\/p>\n
\"Asinhrono<\/p>\n
<\/p>\n
Tako smo obravnavali, kako je asynchronicity izvedena v JavaScriptu. Zdaj pa hitro preidimo na evolucijo asinhronega kode.<\/p>\n
<\/p>\n
Evolucija asinhronega kode.<\/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
Asinhrono programiranje, kakr\u0161nega poznamo v JavaScriptu, lahko izvedemo samo z funkcijami. Te lahko predamo drugim funkcijam, kot katerokoli drugo spremenljivko. Tako so nastali povratni klici. In to je zabavno, dokler se ne spremeni v \u017ealost, obup in \u017ealost. Zakaj? Preprosto:<\/p>\n
<\/p>\n