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

Hallo iedereen. Sergei Omelnitsky hier. Onlangs heb ik een livestream gedaan over reactief programmeren, waarin ik sprak over asynchroniciteit in JavaScript. Vandaag wil ik dit materiaal samenvatten. <\/p>\n

<\/p>\n

\"Asynchroon<\/p>\n

<\/p>\n

Maar voordat we met het hoofdonderwerp beginnen, moeten we een inleiding maken. Laten we beginnen met definities: wat zijn een stapel en een wachtrij?
\nStapel <\/strong>is een collectie waarvan de elementen volgens het principe 'laatst binnen, eerst eruit' LIFO worden verkregen.
\nWachtrij <\/strong>is een collectie waarvan de elementen volgens het principe 'eerste in, eerste uit' FIFO worden verkregen.<\/p>\n

<\/p>\n

Ok\u00e9, laten we verder gaan. <\/p>\n

<\/p>\n

\"Asynchroon<\/p>\n

<\/p>\n

JavaScript is een single-threaded programmeertaal. Dit betekent dat er slechts \u00e9\u00e9n uitvoeringsdraad en \u00e9\u00e9n stapel is waarin functies in de wachtrij voor uitvoering worden geplaatst. Dus kan JavaScript op elk moment slechts \u00e9\u00e9n operatie uitvoeren; andere operaties moeten wachten in de stapel totdat ze worden opgeroepen. <\/p>\n

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

De oproepstapel<\/strong> is een datastructuur die samengevat informatie opschrijft over waar we in het programma zijn. Wanneer we een functie ingaan, plaatsen we een record daarvan bovenaan de stapel. Wanneer we uit de functie terugkeren, halen we het bovenste element van de stapel en komen we daar waar we deze functie hebben opgeroepen. Dat is alles wat de stapel doet. En nu een zeer interessante vraag. Hoe werkt asynchroniciteit in JavaScript dan?<\/p>\n

<\/p>\n

\"Asynchroon<\/p>\n

<\/p>\n

In feite is er naast de stapel in browsers een speciale wachtrij voor het werken met het zogenaamde WebAPI. Functies uit deze wachtrij worden alleen in volgorde uitgevoerd nadat de stapel volledig is geleegd. Pas daarna worden ze van de wachtrij naar de stapel verplaatst voor uitvoering. Als er momenteel minstens \u00e9\u00e9n element in de stapel zit, kunnen ze de stapel niet binnenkomen. Dit is precies de reden waarom aanroeptijden van functies met time-outs vaak onnauwkeurig zijn, omdat een functie de stapel niet binnen kan gaan zolang deze vol is. <\/p>\n

<\/p>\n

Laten we het volgende voorbeeld bekijken en het stap voor stap 'uitvoeren'. Laten we ook zien wat er in het systeem gebeurt.<\/p>\n

<\/p>\n

console.log('Hi');\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
1) Ondertussen gebeurt er niets. De browserconsole is leeg, de oproepstapel is leeg.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
2) Vervolgens wordt de opdracht console.log(‘Hi’) aan de oproepstack toegevoegd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
3) En het wordt uitgevoerd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
4) Daarna wordt console.log(‘Hi’) uit de oproepstack verwijderd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
5) Laten we nu kijken naar het commando setTimeout(function cb1() {\u2026 }). Het wordt aan de call stack toegevoegd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
6) Het commando setTimeout(function cb1() {\u2026 }) wordt uitgevoerd. De browser cre\u00ebert een timer die onderdeel is van de Web API. Deze zal de tijd aftellen.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
7) Het commando setTimeout(function cb1() {\u2026 }) is voltooid en wordt uit de call stack verwijderd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
8) De opdracht console.log(‘Bye’) wordt aan de oproepstack toegevoegd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
9) De opdracht console.log(‘Bye’) wordt uitgevoerd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
10) De opdracht console.log(‘Bye’) wordt uit de oproepstack verwijderd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
11) Nadat er minstens 5000 ms zijn verstreken, voltooit de timer zijn werk en plaatst de callback cb1 in de callback queue.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
12) De event loop neemt de functie cb1 uit de callback queue en plaatst deze in de call stack.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
13) De functie cb1 wordt uitgevoerd en voegt console.log(‘cb1’) toe aan de oproepstack.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
14) De opdracht console.log(‘cb1’) wordt uitgevoerd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
15) De opdracht console.log(‘cb1’) wordt uit de oproepstack verwijderd.<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
16) De functie cb1 wordt uit de call stack verwijderd.<\/p>\n
<\/p>\n
Laten we eens kijken naar een voorbeeld in actie:<\/p>\n
<\/p>\n
\"Asynchroon<\/p>\n
<\/p>\n
Dus we hebben besproken hoe asynchroniciteit in JavaScript wordt gerealiseerd. Laten we nu kort praten over de evolutie van asynchrone code.<\/p>\n
<\/p>\n
De evolutie van asynchrone code.<\/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
Asynchroon programmeren, zoals we het in JavaScript kennen, kan enkel worden gerealiseerd met functies. Ze kunnen zoals elke andere variabele aan andere functies worden doorgegeven. Zo zijn callbacks ontstaan. En dat is leuk, grappig en spannend, totdat het verandert in verdriet, melancholie en verdriet. Waarom? Gewoon omdat:<\/p>\n
<\/p>\n