{"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\/ro\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Programarea asincron\u0103 \u00een JavaScript. (Callback, Promisiune, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Salut tuturor. Sunt Oleinik Sergey. Recent am avut un stream despre programarea reactiv\u0103, unde am vorbit despre asincronismul din JavaScript. Ast\u0103zi a\u0219 dori s\u0103 rezum acest material. <\/p>\n

<\/p>\n

\"Programarea<\/p>\n

<\/p>\n

Dar \u00eenainte de a \u00eencepe materialul principal, trebuie s\u0103 facem o introducere. A\u0219adar, s\u0103 \u00eencepem cu defini\u021biile: ce este un stiv\u0103 \u0219i o coad\u0103?
\nStiv\u0103 <\/strong>\u2014 este o colec\u021bie ale c\u0103rei elemente sunt ob\u021binute pe principiul \u201eultimul intrat, primul ie\u0219it\u201d LIFO
\nCoad\u0103 <\/strong>\u2014 este o colec\u021bie ale c\u0103rei elemente sunt ob\u021binute pe principiul \u201eprimul intrat, primul ie\u0219it\u201d FIFO<\/p>\n

<\/p>\n

Bine, s\u0103 continu\u0103m. <\/p>\n

<\/p>\n

\"Programarea<\/p>\n

<\/p>\n

JavaScript este un limbaj de programare pe un singur fir de execu\u021bie. Aceasta \u00eenseamn\u0103 c\u0103 are un singur fir de execu\u021bie \u0219i o singur\u0103 stiv\u0103, \u00een care func\u021biile sunt a\u0219ezate \u00een a\u0219teptare pentru execu\u021bie. Prin urmare, \u00eentr-un singur moment, JavaScript poate executa doar o singur\u0103 opera\u021bie, iar celelalte opera\u021bii a\u0219teapt\u0103 s\u0103 fie procesate \u00een stiv\u0103 p\u00e2n\u0103 c\u00e2nd sunt apelate. <\/p>\n

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

Stiva de apeluri<\/strong> \u2014 este o structur\u0103 de date care, simplificat, \u00eenregistreaz\u0103 informa\u021bii despre locul din program unde ne afl\u0103m. Dac\u0103 intr\u0103m \u00eentr-o func\u021bie, ad\u0103ug\u0103m un record despre aceasta \u00een partea de sus a stivei. C\u00e2nd ne \u00eentoarcem din func\u021bie, scoatem din stiv\u0103 cel mai de sus element \u0219i ne reg\u0103sim acolo de unde am apelat acea func\u021bie. Aceasta este tot ce poate face o stiv\u0103. Dar acum apare o \u00eentrebare foarte interesant\u0103. Cum func\u021bioneaz\u0103 atunci asincronismul \u00een JavaScript?<\/p>\n

<\/p>\n

\"Programarea<\/p>\n

<\/p>\n

De fapt, pe l\u00e2ng\u0103 stiv\u0103, \u00een browsere exist\u0103 o coad\u0103 special\u0103 pentru lucrul cu a\u0219a-numitul WebAPI. Func\u021biile din aceast\u0103 coad\u0103 vor fi executate \u00een ordinea \u00een care sunt ad\u0103ugate doar dup\u0103 ce stiva este complet eliberat\u0103. Numai dup\u0103 aceea sunt mutate din coad\u0103 \u00een stiv\u0103 pentru execu\u021bie. Dac\u0103 \u00een stiv\u0103 exist\u0103 m\u0103car un element, acestea nu pot s\u0103 intre \u00een stiv\u0103. Din acest motiv, apelurile func\u021biilor cu timeout sunt adesea inexacte ca timp, deoarece func\u021bia nu poate intra din coad\u0103 \u00een stiv\u0103, c\u00e2t timp aceasta este plin\u0103. <\/p>\n

<\/p>\n

S\u0103 lu\u0103m urm\u0103torul exemplu \u0219i s\u0103 ne ocup\u0103m de \u201eexecu\u021bia\u201d lui pas cu pas. De asemenea, s\u0103 vedem ce se \u00eent\u00e2mpl\u0103 \u00een sistem \u00een acela\u0219i timp.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
1) Deocamdat\u0103 nu se \u00eent\u00e2mpl\u0103 nimic. Consola browserului este goal\u0103, stiva de apeluri este liber\u0103.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
2) Apoi, comanda console.log('Hi') este ad\u0103ugat\u0103 \u00een stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
3) \u0218i aceasta se execut\u0103<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
4) Apoi, console.log('Hi') este eliminat\u0103 din stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
5) Acum trecem la comanda setTimeout(function cb1() {\u2026 }). Aceasta este ad\u0103ugat\u0103 \u00een stiva de apeluri.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
6) Comanda setTimeout(function cb1() {\u2026 }) se execut\u0103. Browserul creeaz\u0103 un timer, care face parte din Web API. Acesta va \u00eencepe un contor \u00eenapoi.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
7) Comanda setTimeout(function cb1() {\u2026 }) a terminat \u0219i este eliminat\u0103 din stiva de apeluri.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
8) Comanda console.log('Bye') este ad\u0103ugat\u0103 \u00een stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
9) Comanda console.log('Bye') este executat\u0103.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
10) Comanda console.log('Bye') este eliminat\u0103 din stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
11) Dup\u0103 ce au trecut cel pu\u021bin 5000 ms, timerul terminateaz\u0103 \u0219i plaseaz\u0103 callback-ul cb1 \u00een coada de callback-uri.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
12) Ciclul de evenimente ia func\u021bia cb1 din coada de callback-uri \u0219i o plaseaz\u0103 \u00een stiva de apeluri.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
13) Func\u021bia cb1 este executat\u0103 \u0219i adaug\u0103 console.log('cb1') \u00een stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
14) Comanda console.log('cb1') este executat\u0103.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
15) Comanda console.log('cb1') este eliminat\u0103 din stiva apelurilor.<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
16) Func\u021bia cb1 este eliminat\u0103 din stiva de apeluri.<\/p>\n
<\/p>\n
S\u0103 ne uit\u0103m la un exemplu \u00een dinamic\u0103:<\/p>\n
<\/p>\n
\"Programarea<\/p>\n
<\/p>\n
Iat\u0103, am discutat despre cum asynchronicitatea este implementat\u0103 \u00een JavaScript. Acum s\u0103 vorbim pe scurt despre evolu\u021bia codului asincron.<\/p>\n
<\/p>\n
Evolu\u021bia codului asincron.<\/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
Programarea asincron\u0103, a\u0219a cum o \u0219tim \u00een JavaScript, poate fi realizat\u0103 doar prin func\u021bii. Acestea pot fi transmise ca orice alt\u0103 variabil\u0103 altor func\u021bii. Astfel au ap\u0103rut callback-urile. \u0218i este grozav, distractiv \u0219i plin de via\u021b\u0103, p\u00e2n\u0103 c\u00e2nd devine trist, melancolic \u0219i deprimant. De ce? E simplu:<\/p>\n
<\/p>\n