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

Cze\u015b\u0107 wszystkim. Z tej strony Omyelnitsky Sergey. Niedawno prowadzi\u0142em strumie\u0144 na temat programowania reaktywnego, gdzie opowiada\u0142em o asynchroniczno\u015bci w JavaScript. Dzi\u015b chcia\u0142bym podsumowa\u0107 ten materia\u0142. <\/p>\n

<\/p>\n

\"Programowanie<\/p>\n

<\/p>\n

Ale zanim zaczniemy od g\u0142\u00f3wnego materia\u0142u, musimy zrobi\u0107 wprowadzenie. Zacznijmy od definicji: co to jest stos i kolejka?
\nStos <\/strong>to zbi\u00f3r, w kt\u00f3rym elementy s\u0105 pobierane wed\u0142ug zasady \u201eostatni wszed\u0142, pierwszy wyszed\u0142\u201d LIFO.
\nKolejka <\/strong>to zbi\u00f3r, w kt\u00f3rym elementy s\u0105 pobierane wed\u0142ug zasady \u201epierwszy wszed\u0142, pierwszy wyszed\u0142\u201d FIFO.<\/p>\n

<\/p>\n

Dobrze, kontynuujmy. <\/p>\n

<\/p>\n

\"Programowanie<\/p>\n

<\/p>\n

JavaScript to j\u0119zyk programowania jednow\u0105tkowego. Oznacza to, \u017ce ma tylko jeden w\u0105tek wykonawczy i jeden stos, do kt\u00f3rego funkcje s\u0105 dodawane w kolejce do wykonania. W zwi\u0105zku z tym w danym momencie JavaScript mo\u017ce wykona\u0107 tylko jedn\u0105 operacj\u0119, a pozosta\u0142e operacje b\u0119d\u0105 czeka\u0107 w kolejce na stosie, a\u017c zostan\u0105 wywo\u0142ane. <\/p>\n

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

Stos wywo\u0142a\u0144<\/strong> to struktura danych, kt\u00f3ra, m\u00f3wi\u0105c uproszczonym j\u0119zykiem, zapisuje informacje o miejscu w programie, w kt\u00f3rym si\u0119 znajdujemy. Gdy przechodzimy do funkcji, dodajemy wpis o niej do g\u00f3rnej cz\u0119\u015bci stosu. Kiedy wracamy z funkcji, usuwamy z g\u00f3ry stosu najnowszy element i wracamy tam, sk\u0105d wywo\u0142ano t\u0119 funkcj\u0119. To wszystko, czym dysponuje stos. A teraz bardzo interesuj\u0105ce pytanie: jak zatem dzia\u0142a asynchroniczno\u015b\u0107 w JavaScript?<\/p>\n

<\/p>\n

\"Programowanie<\/p>\n

<\/p>\n

W rzeczywisto\u015bci opr\u00f3cz stosu w przegl\u0105darkach istnieje specjalna kolejka do pracy z tzw. WebAPI. Funkcje w tej kolejce zostan\u0105 wykonane w porz\u0105dku tylko po ca\u0142kowitym opr\u00f3\u017cnieniu stosu. Dopiero wtedy zostan\u0105 przeniesione z kolejki do stosu do wykonania. Je\u015bli w stosie jest przynajmniej jeden element, nie mog\u0105 one wej\u015b\u0107 na stos. To w\u0142a\u015bnie z tego powodu wywo\u0142ania funkcji po up\u0142ywie czasu cz\u0119sto s\u0105 nieterminowe, poniewa\u017c funkcja nie mo\u017ce wej\u015b\u0107 z kolejki do stosu, dop\u00f3ki jest on zaj\u0119ty. <\/p>\n

<\/p>\n

Przyjrzyjmy si\u0119 nast\u0119puj\u0105cemu przyk\u0142adowi i zajmijmy si\u0119 jego krokowym \u201ewykonaniem\u201d. Zobaczmy r\u00f3wnie\u017c, co w tym czasie dzieje si\u0119 w systemie.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
1) Na razie nic si\u0119 nie dzieje. Konsola przegl\u0105darki jest czysta, stos wywo\u0142a\u0144 pusty.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
2) Nast\u0119pnie polecenie console.log(\u2018Hi\u2019) zostaje dodane do stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
3) I jest wykonywane.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
4) Potem console.log(\u2018Hi\u2019) zostaje usuni\u0119te ze stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
5) Teraz przechodzimy do polecenia setTimeout(function cb1() {\u2026 }). Zostaje dodane do stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
6) Polecenie setTimeout(function cb1() {\u2026 }) jest wykonywane. Przegl\u0105darka tworzy licznik, kt\u00f3ry jest cz\u0119\u015bci\u0105 Web API. Rozpocznie odliczanie czasu.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
7) Polecenie setTimeout(function cb1() {\u2026 }) zako\u0144czy\u0142o dzia\u0142anie i zosta\u0142o usuni\u0119te ze stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
8) Polecenie console.log(\u2018Bye\u2019) zostaje dodane do stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
9) Polecenie console.log(\u2018Bye\u2019) zostaje wykonane.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
10) Polecenie console.log(\u2018Bye\u2019) zostaje usuni\u0119te ze stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
11) Po up\u0142ywie co najmniej 5000 ms, licznik ko\u0144czy dzia\u0142anie i umieszcza callback cb1 w kolejce callback\u00f3w.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
12) P\u0119tla wydarze\u0144 bierze funkcj\u0119 cb1 z kolejki callback\u00f3w i umieszcza j\u0105 w stosie wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
13) Funkcja cb1 jest wykonywana i dodaje console.log(\u2018cb1\u2019) do stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
14) Polecenie console.log(\u2018cb1\u2019) zostaje wykonane.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
15) Polecenie console.log(\u2018cb1\u2019) zostaje usuni\u0119te ze stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
16) Funkcja cb1 jest usuwana ze stosu wywo\u0142a\u0144.<\/p>\n
<\/p>\n
Sp\u00f3jrzmy na przyk\u0142ad w dynamicznej formie:<\/p>\n
<\/p>\n
\"Programowanie<\/p>\n
<\/p>\n
Oto my, om\u00f3wili\u015bmy, jak w JavaScript zrealizowano asynchroniczno\u015b\u0107. Teraz porozmawiajmy kr\u00f3tko o ewolucji kodu asynchronicznego.<\/p>\n
<\/p>\n
Ewolucja kodu asynchronicznego.<\/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
Asynchroniczne programowanie, jakie znamy w JavaScript, mo\u017cna zrealizowa\u0107 tylko za pomoc\u0105 funkcji. Mog\u0105 by\u0107 przekazywane jak ka\u017cda inna zmienna do innych funkcji. Tak narodzi\u0142y si\u0119 callbacki. I to jest fajne, zabawne i ekscytuj\u0105ce, dop\u00f3ki nie zamienia si\u0119 w smutek i t\u0119sknot\u0119. Dlaczego? Bo to proste:<\/p>\n
<\/p>\n