{"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\/novosti-interneta\/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. Qui \u00e8 Sergey Omelnytsky. Di recente ho tenuto uno streaming sulla programmazione reattiva, in cui 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. Iniziamo quindi con le definizioni: cosa sono lo stack e la coda?
\nStack <\/strong>\u00e8 una collezione i cui elementi vengono acquisiti secondo il principio \u00abultimo ad entrare, primo ad uscire\u00bb LIFO
\nCoda <\/strong>\u00e8 una collezione i cui elementi vengono acquisiti secondo il principio \u00abprimo ad entrare, primo ad uscire\u00bb 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 ha solo un thread 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; le altre operazioni devono aspettare il loro turno nello stack fino a quando non vengono chiamate. <\/p>\n

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

Stack delle chiamate<\/strong> \u2014 \u00e8 una struttura dati che, semplificando, registra informazioni sul punto in cui ci troviamo nel programma. Se entriamo in una funzione, mettiamo una registrazione di essa in cima allo stack. Quando usciamo dalla funzione, estraiamo l'elemento in cima allo stack e torniamo al punto da cui abbiamo chiamato quella funzione. Questo \u00e8 tutto ci\u00f2 che fa uno stack. Ora, c'\u00e8 una domanda molto interessante. Come funziona l'asynchronousit\u00e0 in JavaScript?<\/p>\n

<\/p>\n

\"Programmazione<\/p>\n

<\/p>\n

In realt\u00e0, oltre allo stack, nei browser esiste una coda speciale per gestire il cosiddetto WebAPI. Le funzioni in 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 al momento c'\u00e8 almeno un elemento nello stack, non possono entrare nello stack. \u00c8 proprio per questo motivo che le chiamate alle funzioni con timeout spesso non sono precise nel tempo, poich\u00e9 la funzione non pu\u00f2 entrare nello stack finch\u00e9 esso \u00e8 pieno. <\/p>\n

<\/p>\n

Consideriamo il seguente esempio e seguiamo la sua 'esecuzione' passo per passo. Andiamo a vedere cosa succede nel sistema durante questo processo.<\/p>\n

<\/p>\n

console.log('Ciao');\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Arrivederci');<\/code><\/pre>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
1) All'inizio non succede nulla. La console del browser \u00e8 vuota, lo stack delle chiamate \u00e8 vuoto.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
2) \u041f\u043e\u0442\u043e\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Hi’)\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
3) E viene eseguito.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
4) \u0417\u0430\u0442\u0435\u043c console.log(‘Hi’) \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/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 fa parte delle Web API. Inizier\u00e0 il conto alla rovescia.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
7) Il comando setTimeout(function cb1() {\u2026 }) ha completato l'esecuzione e viene rimosso dallo stack delle chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
8) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
9) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
10) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘Bye’)\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
11) Dopo che sono trascorsi almeno 5000 ms, il timer termina e colloca 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 mette nello stack delle chiamate.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
13) \u0424\u0443\u043d\u043a\u0446\u0438\u044f\u00a0cb1\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u00a0console.log(‘cb1’)\u00a0\u0432 \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
14) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘cb1’)\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
15) \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0console.log(‘cb1’)\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/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 azione:<\/p>\n
<\/p>\n
\"Programmazione<\/p>\n
<\/p>\n
Bene, abbiamo esplorato come l'asincronia \u00e8 implementata in JavaScript. Ora parliamo brevemente dell'evoluzione del codice asincrono.<\/p>\n
<\/p>\n
Evoluzione del codice asincrono.<\/h2>\n
<\/p>\n
a(function (risultatiDaA) {\n    b(risultatiDaA, function (risultatiDaB) {\n        c(risultatiDaB, function (risultatiDaC) {\n            d(risultatiDaC, function (risultatiDaD) {\n                e(risultatiDaD, function (risultatiDaE) {\n                    f(risultatiDaE, function (risultatiDaF) {\n                        console.log(risultatiDaF);\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. \u00c8 tutto divertente e spassoso fino a quando non si trasforma in tristezza e malinconia. Perch\u00e9?<\/p>\n
<\/p>\n