{"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\/novosti-interneta\/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. K\u00fcrzlich habe ich einen Stream \u00fcber reaktive Programmierung gehalten, in dem ich \u00fcber Asynchronit\u00e4t in JavaScript sprach. Heute m\u00f6chte ich diese Inhalte zusammenfassen. <\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

Bevor wir mit dem Hauptmaterial beginnen, m\u00fcssen wir eine Einf\u00fchrung geben. Lassen Sie uns also mit den Definitionen beginnen: Was sind Stack und Queue?
\nStack <\/strong>ist eine Sammlung, deren Elemente nach dem Prinzip 'Last In, First Out' (LIFO) abgerufen werden.
\nQueue <\/strong>ist eine Sammlung, deren Elemente nach dem Prinzip 'First In, First Out' (FIFO) abgerufen werden.<\/p>\n

<\/p>\n

In Ordnung, fahren wir fort. <\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

JavaScript ist eine einstr\u00e4ngige Programmiersprache. Das bedeutet, dass es nur einen Ausf\u00fchrungsstrang und einen Stack gibt, in den Funktionen zur Ausf\u00fchrung eingereiht werden. Das hei\u00dft, zur gleichen Zeit kann JavaScript nur eine Operation ausf\u00fchren, w\u00e4hrend andere Operationen in der Warteschlange im Stack warten, bis sie aufgerufen werden. <\/p>\n

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

Call Stack<\/strong> \u2014 ist eine Datenstruktur, die vereinfacht gesagt Informationen \u00fcber den Ort im Programm speichert, an dem wir uns befinden. Wenn wir in eine Funktion wechseln, f\u00fcgen wir einen Eintrag \u00fcber diese Funktion oben auf dem Stack hinzu. Wenn wir aus der Funktion zur\u00fcckkehren, ziehen wir das oberste Element vom Stack und landen dort, wo wir diese Funktion aufgerufen haben. Das ist alles, was der Stack kann. Aber jetzt stellt sich eine \u00e4u\u00dferst interessante Frage: Wie funktioniert die Asynchronit\u00e4t in JavaScript?<\/p>\n

<\/p>\n

\"Asynchrone<\/p>\n

<\/p>\n

Tats\u00e4chlich gibt es neben dem Stack im Browser eine spezielle Warteschlange f\u00fcr die Arbeit mit dem sogenannten WebAPI. Die Funktionen aus dieser Warteschlange werden der Reihe nach erst dann ausgef\u00fchrt, wenn der Stack vollst\u00e4ndig geleert ist. Erst danach gelangen sie aus der Warteschlange auf den Stack zur Ausf\u00fchrung. Wenn sich im Stack derzeit auch nur ein Element befindet, k\u00f6nnen sie nicht auf den Stack gelangen. Genau aus diesem Grund ist der Aufruf von Funktionen per Timeout oft zeitlich ungenau, da die Funktion nicht aus der Warteschlange auf den Stack gelangen kann, solange dieser gef\u00fcllt ist. <\/p>\n

<\/p>\n

Betrachten wir das folgende Beispiel und besch\u00e4ftigen wir uns mit seiner schrittweisen \"Ausf\u00fchrung\". Au\u00dferdem schauen wir uns an, 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) Zun\u00e4chst passiert nichts. Die Konsole des Browsers ist leer, der Aufruf-Stack ist leer.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
2) Dann wird der Befehl console.log(\u2018Hi\u2019) dem Aufrufstack 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) Anschlie\u00dfend wird console.log(\u2018Hi\u2019) aus dem Aufrufstack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
5) Jetzt kommen wir zum Befehl setTimeout(function cb1() {\u2026 }). Dieser wird zum Aufruf-Stack 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 beginnt mit dem Countdown.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
7) Der Befehl setTimeout(function cb1() {\u2026 }) hat seine Arbeit beendet und wird aus dem Aufruf-Stack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
8) Der Befehl console.log(\u2018Bye\u2019) wird dem Aufrufstack hinzugef\u00fcgt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
9) Der Befehl console.log(\u2018Bye\u2019) wird ausgef\u00fchrt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
10) Der Befehl console.log(\u2018Bye\u2019) wird aus dem Aufrufstack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
11) Nachdem mindestens 5000 ms vergangen sind, beendet der Timer seine Arbeit und legt das Callback cb1 in die Callback-Warteschlange.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
12) Die Ereignisschleife nimmt die Funktion cb1 aus der Callback-Warteschlange und f\u00fcgt sie dem Aufruf-Stack hinzu.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
13) Die Funktion cb1 wird ausgef\u00fchrt und f\u00fcgt console.log(\u2018cb1\u2019) dem Aufrufstack hinzu.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
14) Der Befehl console.log(\u2018cb1\u2019) wird ausgef\u00fchrt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
15) Der Befehl console.log(\u2018cb1\u2019) wird aus dem Aufrufstack entfernt.<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
16) Die Funktion cb1 wird aus dem Aufruf-Stack entfernt.<\/p>\n
<\/p>\n
Lassen Sie uns ein Beispiel in Aktion betrachten:<\/p>\n
<\/p>\n
\"Asynchrone<\/p>\n
<\/p>\n
So, nun haben wir gesehen, wie Asynchronit\u00e4t in JavaScript umgesetzt wird. Lassen Sie uns nun kurz \u00fcber die Evolution des asynchronen Codes sprechen.<\/p>\n
<\/p>\n
Evolution des 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 mit Funktionen umgesetzt werden. Diese k\u00f6nnen wie jede andere Variable an andere Funktionen \u00fcbergeben werden. So entstanden die Callbacks. Das ist spannend und macht Spa\u00df, bis es sich in Traurigkeit und Frustration verwandelt. Warum? Weil:<\/p>\n
<\/p>\n