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

P\u00ebrsh\u00ebndetje t\u00eb gjith\u00ebve. K\u00ebtu \u00ebsht\u00eb Sergey Omel'nytskyi. Koh\u00ebt e fundit kam mbajtur nj\u00eb transmision n\u00eb lidhje me programimin reaktiv, ku tregova p\u00ebr asinkronicitetin n\u00eb JavaScript. Sot do t\u00eb doja t\u00eb p\u00ebrmbledh k\u00ebt\u00eb materiale. <\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

Por para se t\u00eb fillojm\u00eb me materialin kryesor, na nevojitet nj\u00eb hyrje. Pra, le t\u00eb fillojm\u00eb me p\u00ebrkufizimet: \u00e7far\u00eb \u00ebsht\u00eb steku dhe queues?
\nSteku <\/strong>\u00ebsht\u00eb nj\u00eb koleksion, element\u00ebt e t\u00eb cilit merren sipas parimit \"i fundit i ardhur, i pari i dal\u00eb\" LIFO
\nQueue <\/strong>\u00ebsht\u00eb nj\u00eb koleksion, element\u00ebt e t\u00eb cilit merren sipas parimit \"i pari i ardhur, i pari i dal\u00eb\" FIFO<\/p>\n

<\/p>\n

Mir\u00eb, vazhdojm\u00eb. <\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

JavaScript \u00ebsht\u00eb nj\u00eb gjuh\u00eb programimi me nj\u00eb thread. Kjo do t\u00eb thot\u00eb se ka vet\u00ebm nj\u00eb thread ekzekutimi dhe nj\u00eb stek, n\u00eb t\u00eb cilin vendosen funksionet p\u00ebr ekzekutim. Prandaj, n\u00eb nj\u00eb moment t\u00eb vet\u00ebm, JavaScript mund t\u00eb ekzekutoj\u00eb vet\u00ebm nj\u00eb operacion, nd\u00ebrsa operacionet e tjera do t\u00eb presin n\u00eb radh\u00eb n\u00eb stek derisa t\u00eb thirren. <\/p>\n

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

Steku i thirrjeve<\/strong> \u00ebsht\u00eb nj\u00eb struktur\u00eb t\u00eb dh\u00ebnash q\u00eb, n\u00eb m\u00ebnyr\u00eb t\u00eb thjesht\u00eb, regjistron informacionin mbi vendin n\u00eb program ku ndodhemi. Kur kalojm\u00eb n\u00eb nj\u00eb funksion, vendosim nj\u00eb regjistrim t\u00eb tij n\u00eb krye t\u00eb stekut. Kur kthehemi nga funksioni, heqim elementin m\u00eb t\u00eb sip\u00ebrm nga steku dhe kthehemi aty ku e kemi thirrur k\u00ebt\u00eb funksion. K\u00ebto jan\u00eb t\u00eb gjitha aft\u00ebsit\u00eb e stekut. Tani, pyetja shum\u00eb interesante. Si funksionon asinkroniciteti n\u00eb JavaScript?<\/p>\n

<\/p>\n

\"Programimi<\/p>\n

<\/p>\n

N\u00eb t\u00eb v\u00ebrtet\u00eb, p\u00ebrve\u00e7 stekut, n\u00eb shfletues ekziston nj\u00eb radh\u00eb e ve\u00e7ant\u00eb p\u00ebr t\u00eb punuar me at\u00eb q\u00eb quhet WebAPI. Funksionet n\u00eb k\u00ebt\u00eb radh\u00eb do t\u00eb ekzekutohen me rend vet\u00ebm pasi steku t\u00eb pastruar plot\u00ebsisht. Vet\u00ebm pas k\u00ebsaj ato vendosen nga radh\u00eb n\u00eb stek p\u00ebr ekzekutim. N\u00ebse n\u00eb stek n\u00eb k\u00ebt\u00eb moment ndodhet t\u00eb pakt\u00ebn nj\u00eb element, ato nuk mund t\u00eb hyjn\u00eb n\u00eb stek. Pik\u00ebrisht p\u00ebr k\u00ebt\u00eb arsye thirrja e funksioneve me vones\u00eb shpesh \u00ebsht\u00eb e pasakt\u00eb n\u00eb koh\u00eb, pasi funksioni nuk mund t\u00eb hyj\u00eb nga radh\u00eb n\u00eb stek derisa ai t\u00eb jet\u00eb plot. <\/p>\n

<\/p>\n

Le t\u00eb shqyrtojm\u00eb shembullin e m\u00ebposht\u00ebm dhe t\u00eb merremi me \"ekzekutimin\" e tij hap pas hapi. Po ashtu, le t\u00eb shohim se \u00e7far\u00eb ndodh me k\u00ebt\u00eb n\u00eb sistem.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
1) Deri tani nuk ndodh asgj\u00eb. Konsola e shfletuesit \u00ebsht\u00eb e past\u00ebr, steku i thirrjeve \u00ebsht\u00eb bosh.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
2) M\u00eb pas, komand\u00ebn console.log(\u2018Hi\u2019) e shtojm\u00eb n\u00eb grumbullin e thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
3) Dhe ajo ekzekutohet<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
4) Pastaj, console.log(\u2018Hi\u2019) hiqet nga grumbulli i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
5) Tani kalojm\u00eb te komanda setTimeout(function cb1() {\u2026 }). Ajo shtohet n\u00eb stoku i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
6) Komanda setTimeout(function cb1() {\u2026 }) ekzekutohet. Shfletuesi krijon nj\u00eb timer, q\u00eb \u00ebsht\u00eb pjes\u00eb e Web API. Ai do t\u00eb realizoj\u00eb nj\u00eb num\u00ebrim mbrapsht.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
7) Komanda setTimeout(function cb1() {\u2026 }) p\u00ebrfundon pun\u00ebn dhe hiqet nga stoku i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
8) Komanda console.log(\u2018Bye\u2019) i shtohet grumbullit t\u00eb thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
9) Komanda console.log(\u2018Bye\u2019) ekzekutohet.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
10) Komanda console.log(\u2018Bye\u2019) hiqet nga grumbulli i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
11) Pasi t\u00eb kalojn\u00eb t\u00eb pakt\u00ebn 5000 ms., timer-i p\u00ebrfundon pun\u00ebn dhe vendos callback-un cb1 n\u00eb radh\u00ebn e callbacks.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
12) Cikli i ngjarjeve merr funksionin cb1 nga radhja e callbacks dhe e vendos at\u00eb n\u00eb stoku i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
13) Funksioni cb1 ekzekutohet dhe shton console.log(\u2018cb1\u2019) n\u00eb grumbullin e thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
14) Komanda console.log(\u2018cb1\u2019) ekzekutohet.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
15) Komanda console.log(\u2018cb1\u2019) hiqet nga grumbulli i thirrjeve.<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
16) Funksioni cb1 hiqet nga stoku i thirrjeve.<\/p>\n
<\/p>\n
Shikojm\u00eb nj\u00eb shembull n\u00eb dinamik\u00eb:<\/p>\n
<\/p>\n
\"Programimi<\/p>\n
<\/p>\n
Ja se si e kemi shqyrtuar se si asinkronizimi \u00ebsht\u00eb realizuar n\u00eb JavaScript. Tani le t\u00eb flasim shkurt p\u00ebr evolucionin e kodit asinkron.<\/p>\n
<\/p>\n
Evolucioni i kodit asinkron.<\/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
Programimi asinkron, si\u00e7 e njohim ne JavaScript, mund t\u00eb realizohet vet\u00ebm me funksione. Ato mund t\u00eb kalohen si \u00e7do variab\u00ebl tjet\u00ebr te funksione t\u00eb tjera. K\u00ebshtu lindi callback-u. Dhe \u00ebsht\u00eb arg\u00ebtues derisa t\u00eb kthehet n\u00eb trishtim dhe m\u00ebrzi. Pse? Sepse \u00ebsht\u00eb e thjesht\u00eb:<\/p>\n
<\/p>\n