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

Ciao a tutti. Sono Sergey Omelnitsky. Non molto tempo fa ho tenuto uno streaming sulla programmazione reattiva, dove ho parlato dell'asincronicit\u00e0 in JavaScript. Oggi vorrei riassumere questo materiale. <\/p>\n

<\/p>\n

\"Programmazione<\/p>\n

<\/p>\n

Ma prima di iniziare il materiale principale, dobbiamo fare un'introduzione. Quindi, iniziamo con le definizioni: che cos'\u00e8 uno stack e una coda?
\nStack <\/strong>\u00e8 una collezione i cui elementi vengono ottenuti secondo il principio \"ultimo entrato, primo uscito\" LIFO
\nCoda <\/strong>\u00e8 una collezione i cui elementi vengono ottenuti secondo il principio \"primo entrato, primo uscito\" FIFO<\/p>\n

<\/p>\n

Ok, continuiamo. <\/p>\n

<\/p>\n

\"Programmazione<\/p>\n

<\/p>\n

JavaScript \u00e8 un linguaggio di programmazione a thread singolo. Questo significa che esiste solo un flusso di esecuzione e uno stack in cui le funzioni vengono messe in coda per l'esecuzione. Di conseguenza, in un dato momento JavaScript pu\u00f2 eseguire solo un'operazione, mentre le altre operazioni devono attendere il loro turno nello stack finch\u00e9 non vengono chiamate. <\/p>\n

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

Stack delle chiamate<\/strong> \u00e8 una struttura dati che, semplificando, registra informazioni sul luogo nel programma in cui ci troviamo. Se entriamo in una funzione, posizioniamo una registrazione di essa nella parte superiore dello stack. Quando ritorniamo dalla funzione, estraiamo il pi\u00f9 alto elemento dallo stack e ci troviamo nel punto da cui abbiamo chiamato quella funzione. Questo \u00e8 tutto quello che sa fare uno stack. E ora, una domanda molto interessante. Come funziona allora l'asincronicit\u00e0 in JavaScript?<\/p>\n

<\/p>\n

\"Programmazione<\/p>\n

<\/p>\n

In realt\u00e0, oltre allo stack, nei browser esiste una particolare coda per lavorare con il cosiddetto WebAPI. Le funzioni di questa coda verranno eseguite in ordine solo dopo che lo stack sar\u00e0 completamente vuoto. Solo allora vengono spostate dalla coda allo stack per l'esecuzione. Se attualmente nello stack c'\u00e8 almeno un elemento, non possono entrare nello stack. \u00c8 proprio per questo che la chiamata delle funzioni con timeout \u00e8 spesso imprecisa nel tempo, poich\u00e9 la funzione non pu\u00f2 entrare nello stack dalla coda finch\u00e9 \u00e8 pieno. <\/p>\n

<\/p>\n

Consideriamo il seguente esempio e affrontiamo il suo \"esecuzione\" passo dopo passo. Inoltre, vediamo cosa sta accadendo nel sistema.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
1) Non succede niente. La console del browser \u00e8 pulita, lo stack delle chiamate \u00e8 vuoto.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
2) Poi il comando console.log('Hi') viene aggiunto allo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
3) E viene eseguito.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
4) Successivamente, console.log('Hi') viene rimosso dallo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
5) Ora passiamo al comando setTimeout(function cb1() {\u2026 }). Viene aggiunto allo stack delle chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
6) Il comando setTimeout(function cb1() {\u2026 }) viene eseguito. Il browser crea un timer, che \u00e8 parte delle Web API. Inizier\u00e0 il conteggio alla rovescia.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
7) Il comando setTimeout(function cb1() {\u2026 }) ha terminato l'esecuzione ed \u00e8 rimosso dallo stack delle chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
8) Il comando console.log('Bye') viene aggiunto allo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
9) Il comando console.log('Bye') viene eseguito.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
10) Il comando console.log('Bye') viene rimosso dallo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
11) Dopo almeno 5000 ms, il timer termina l'esecuzione e inserisce il callback cb1 nella coda dei callback.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
12) Il ciclo degli eventi prende la funzione cb1 dalla coda dei callback e la inserisce nello stack delle chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
13) La funzione cb1 viene eseguita e aggiunge console.log('cb1') allo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
14) Il comando console.log('cb1') viene eseguito.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
15) Il comando console.log('cb1') viene rimosso dallo stack di chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
16) La funzione cb1 viene rimossa dallo stack delle chiamate.<\/p>\n
<\/p>\n
Diamo un'occhiata a un esempio in dinamica:<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
Cos\u00ec abbiamo esaminato come in JavaScript \u00e8 realizzata l'asincronia. Ora parliamo brevemente dell'evoluzione del codice asincrono.<\/p>\n
<\/p>\n
Evoluzione del codice asincrono.<\/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
La programmazione asincrona, cos\u00ec come la conosciamo in JavaScript, pu\u00f2 essere realizzata solo tramite funzioni. Queste possono essere passate come qualsiasi altra variabile ad altre funzioni. Cos\u00ec sono nati i callback. Ed \u00e8 divertente, allegro e spensierato, finch\u00e9 non si trasforma in tristezza, malinconia e dolore. Perch\u00e9? \u00c8 semplice:<\/p>\n
<\/p>\n