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

Bonjour \u00e0 tous. Ici, Sergey Omelnitsky. Il n'y a pas si longtemps, j'ai anim\u00e9 un stream sur la programmation r\u00e9active, o\u00f9 j'ai parl\u00e9 de l'asynchrone en JavaScript. Aujourd'hui, je voudrais r\u00e9sumer ce mat\u00e9riel. <\/p>\n

<\/p>\n

\"Programmation<\/p>\n

<\/p>\n

Mais avant de commencer le contenu principal, nous devons faire une introduction. Alors, commen\u00e7ons par les d\u00e9finitions : qu'est-ce qu'une pile et une file d'attente ?
\nPile <\/strong>\u2014 c'est une collection dont les \u00e9l\u00e9ments sont obtenus selon le principe \u00ab dernier entr\u00e9, premier sorti \u00bb LIFO.
\nFile d'attente <\/strong>\u2014 c'est une collection dont les \u00e9l\u00e9ments sont re\u00e7us selon le principe \u00ab premier entr\u00e9, premier sorti \u00bb FIFO.<\/p>\n

<\/p>\n

D'accord, continuons. <\/p>\n

<\/p>\n

\"Programmation<\/p>\n

<\/p>\n

JavaScript est un langage de programmation \u00e0 thread unique. Cela signifie qu'il n'y a qu'un seul fil d'ex\u00e9cution et une seule pile, dans laquelle les fonctions sont plac\u00e9es en attente d'ex\u00e9cution. Par cons\u00e9quent, \u00e0 un moment donn\u00e9, JavaScript ne peut ex\u00e9cuter qu'une seule op\u00e9ration, les autres op\u00e9rations attendant leur tour dans la pile jusqu'\u00e0 ce qu'elles soient appel\u00e9es. <\/p>\n

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

Pile d'appels<\/strong> \u2014 c'est une structure de donn\u00e9es qui, en termes simples, enregistre des informations sur l'endroit o\u00f9 nous en sommes dans le programme. Lorsque nous entrons dans une fonction, nous ajoutons un enregistrement \u00e0 son sujet en haut de la pile. Lorsque nous revenons de la fonction, nous retirons l'\u00e9l\u00e9ment du haut de la pile et nous nous retrouvons l\u00e0 d'o\u00f9 nous avons appel\u00e9 cette fonction. C'est tout ce que fait la pile. Et maintenant, une question tr\u00e8s int\u00e9ressante. Comment l'asynchrone fonctionne-t-il alors en JavaScript ?<\/p>\n

<\/p>\n

\"Programmation<\/p>\n

<\/p>\n

En r\u00e9alit\u00e9, en plus de la pile, il y a dans les navigateurs une file d'attente sp\u00e9ciale pour travailler avec ce que l'on appelle le WebAPI. Les fonctions de cette file d'attente ne s'ex\u00e9cutent qu'apr\u00e8s que la pile est compl\u00e8tement nettoy\u00e9e. Ce n'est qu'apr\u00e8s cela qu'elles passent de la file d'attente \u00e0 la pile pour ex\u00e9cution. Si la pile contient au moins un \u00e9l\u00e9ment, elles ne peuvent pas entrer dans la pile. C'est exactement pour cette raison que l'appel de fonctions par timeout peut souvent ne pas \u00eatre pr\u00e9cis en termes de temps, car la fonction ne peut pas entrer de la file d'attente dans la pile tant qu'elle est pleine. <\/p>\n

<\/p>\n

Consid\u00e9rons l'exemple suivant et analysons son \u00ab ex\u00e9cution \u00bb \u00e9tape par \u00e9tape. De plus, regardons ce qui se passe dans le syst\u00e8me.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
1) Rien ne se passe encore. La console du navigateur est vide, la pile d'appels est vide.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
2) Ensuite, la commande console.log(\u2018Hi\u2019) est ajout\u00e9e \u00e0 la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
3) Et elle s'ex\u00e9cute.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
4) Puis, console.log(\u2018Hi\u2019) est retir\u00e9 de la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
5) Nous passons maintenant \u00e0 la commande setTimeout(function cb1() {\u2026 }). Elle est ajout\u00e9e \u00e0 la pile d'appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
6) La commande setTimeout(function cb1() {\u2026 }) est ex\u00e9cut\u00e9e. Le navigateur cr\u00e9e un minuteur qui fait partie de l'API Web. Il comptera \u00e0 rebours.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
7) La commande setTimeout(function cb1() {\u2026 }) a termin\u00e9 son travail et est supprim\u00e9e de la pile d'appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
8) La commande console.log(\u2018Bye\u2019) est ajout\u00e9e \u00e0 la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
9) La commande console.log(\u2018Bye\u2019) est ex\u00e9cut\u00e9e.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
10) La commande console.log(\u2018Bye\u2019) est retir\u00e9e de la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
11) Apr\u00e8s au moins 5000 ms, le minuteur termine son travail et place le callback cb1 dans la file d'attente des callbacks.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
12) La boucle d'\u00e9v\u00e9nements prend la fonction cb1 de la file d'attente des callbacks et l'ajoute \u00e0 la pile d'appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
13) La fonction cb1 est ex\u00e9cut\u00e9e et ajoute console.log(\u2018cb1\u2019) \u00e0 la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
14) La commande console.log(\u2018cb1\u2019) est ex\u00e9cut\u00e9e.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
15) La commande console.log(\u2018cb1\u2019) est retir\u00e9e de la pile d\u2019appels.<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
16) La fonction cb1 est supprim\u00e9e de la pile d'appels.<\/p>\n
<\/p>\n
Regardons un exemple en dynamique :<\/p>\n
<\/p>\n
\"Programmation<\/p>\n
<\/p>\n
Eh bien, nous avons vu comment l'asynchronicit\u00e9 est impl\u00e9ment\u00e9e en JavaScript. Maintenant, discutons bri\u00e8vement de l'\u00e9volution du code asynchrone.<\/p>\n
<\/p>\n
L'\u00e9volution du code asynchrone.<\/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 programmation asynchrone telle que nous la connaissons en JavaScript ne peut \u00eatre r\u00e9alis\u00e9e qu'avec des fonctions. Celles-ci peuvent \u00eatre transmises comme n'importe quelle autre variable \u00e0 d'autres fonctions. C'est ainsi qu'ont \u00e9t\u00e9 cr\u00e9\u00e9s les callbacks. Et c'est bien, amusant et joyeux, jusqu'\u00e0 ce que cela se transforme en tristesse, m\u00e9lancolie et chagrin. Pourquoi ? C'est simple:<\/p>\n
<\/p>\n