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

Hallo zusammen. Hier ist Sergey Omelnitsky. Vor kurzem habe ich einen Livestream zum reaktiven Programmieren gehalten, in dem ich \u00fcber Asynchronit\u00e4t in JavaScript gesprochen habe. Heute m\u00f6chte ich dieses Material zusammenfassen. <\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

Aber bevor wir mit dem Hauptmaterial beginnen, m\u00fcssen wir eine Einf\u00fchrung machen. Lass uns also mit Definitionen beginnen: Was ist ein Stack und eine Queue?
\nStack <\/strong>\u2014 das ist eine Sammlung, deren Elemente nach dem Prinzip \u201eLast In, First Out\u201c (LIFO) verarbeitet werden.
\nWarteschlange <\/strong>\u2014 das ist eine Sammlung, deren Elemente nach dem Prinzip \u201eFirst In, First Out\u201c (FIFO) verarbeitet werden.<\/p>\n

<\/p>\n

Okay, lass uns fortfahren. <\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

JavaScript ist eine einzeln laufende Programmiersprache. Das bedeutet, dass es nur einen Ausf\u00fchrungsstrang und einen Stack gibt, in den Funktionen zur Ausf\u00fchrung eingereiht werden. Folglich kann JavaScript zu einem bestimmten Zeitpunkt nur eine Operation ausf\u00fchren, w\u00e4hrend andere Operationen im Stack warten m\u00fcssen, bis sie aufgerufen werden. <\/p>\n

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

Call Stack<\/strong> \u2014 das ist eine Datenstruktur, die vereinfacht gesagt Informationen dar\u00fcber speichert, wo wir uns im Programm befinden. Wenn wir in eine Funktion eintreten, f\u00fcgen wir einen Eintrag daf\u00fcr an die Spitze des Stacks hinzu. Wenn wir aus der Funktion zur\u00fcckkehren, ziehen wir das oberste Element aus dem Stack und gelangen dorthin, wo wir diese Funktion aufgerufen haben. Das ist alles, was der Stack kann. Und jetzt eine sehr interessante Frage: Wie funktioniert dann die Asynchronit\u00e4t in JavaScript?<\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

Tats\u00e4chlich gibt es neben dem Stack in Browsern eine spezielle Queue f\u00fcr die Arbeit mit dem sogenannten WebAPI. Funktionen aus dieser Queue werden der Reihe nach erst nach vollst\u00e4ndiger Leerung des Stacks ausgef\u00fchrt. Erst dann werden sie von der Queue in den Stack zur Ausf\u00fchrung verschoben. Wenn sich zu diesem Zeitpunkt mindestens ein Element im Stack befindet, k\u00f6nnen sie nicht in den Stack gelangen. Genau wegen dieser Tatsache ist der Aufruf von Funktionen mit einem Timeout oft nicht zeitgenau, da die Funktion nicht in den Stack gelangen kann, solange dieser voll ist. <\/p>\n

<\/p>\n

Betrachten wir das folgende Beispiel und schauen uns seine schrittweise \u201eAusf\u00fchrung\u201c an. Lass uns auch untersuchen, was dabei im System passiert.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
1) Bis jetzt passiert nichts. Die Konsole des Browsers ist leer, der Call Stack ist leer.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
2) Dann wird der Befehl console.log('Hi') zum Aufrufestack hinzugef\u00fcgt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
3) Und er wird ausgef\u00fchrt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
4) Dann wird console.log('Hi') aus dem Aufrufestack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
5) Jetzt gehen wir zum Befehl setTimeout(function cb1() {\u2026 }) \u00fcber. Er wird zum Aufrufstack hinzugef\u00fcgt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
6) Der Befehl setTimeout(function cb1() {\u2026 }) wird ausgef\u00fchrt. Der Browser erstellt einen Timer, der Teil der Web-API ist. Er wird den Countdown starten.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
7) Der Befehl setTimeout(function cb1() {\u2026 }) hat seine Arbeit beendet und wird aus dem Aufrufstack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
8) Der Befehl console.log('Bye') wird zum Aufrufestack hinzugef\u00fcgt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
9) Der Befehl console.log('Bye') wird ausgef\u00fchrt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
10) Der Befehl console.log('Bye') wird aus dem Aufrufestack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
11) Nachdem mindestens 5000 ms vergangen sind, beendet der Timer seine Arbeit und f\u00fcgt den Callback cb1 in die Callback-Warteschlange ein.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
12) Der Event Loop nimmt die Funktion cb1 aus der Callback-Warteschlange und f\u00fcgt sie in den Aufrufstack ein.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
13) Die Funktion cb1 wird ausgef\u00fchrt und f\u00fcgt console.log('cb1') dem Aufrufestack hinzu.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
14) Der Befehl console.log('cb1') wird ausgef\u00fchrt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
15) Der Befehl console.log('cb1') wird aus dem Aufrufestack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
16) Die Funktion cb1 wird aus dem Aufrufstack entfernt.<\/p>\n
<\/p>\n
Sehen wir uns ein Beispiel in der Dynamik an:<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
Nun haben wir gesehen, wie Asynchronit\u00e4t in JavaScript implementiert ist. Lassen Sie uns nun kurz \u00fcber die Entwicklung asynchronen Codes sprechen.<\/p>\n
<\/p>\n
Die Entwicklung asynchronen Codes.<\/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
Asynchrones Programmieren, wie wir es in JavaScript kennen, kann nur durch Funktionen umgesetzt werden. Diese k\u00f6nnen wie jede andere Variable an andere Funktionen \u00fcbergeben werden. So entstanden Callbacks. Und das macht Spa\u00df, solange es nicht in Traurigkeit und Kummer umschl\u00e4gt. Warum? Weil:<\/p>\n
<\/p>\n