Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

JavaScript: Asynchrone Programmierung

Einstieg in Thunks

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Thunks sind ein wichtiger gedanklicher Schritt auf dem Weg zum Promise. Dieses Video macht Sie mit den Grundlagen von Thunks vertraut.

Transkript

Auf dem Weg der Lösung von Callback Problematiken ist das "Thunk" entstanden. Thunks sind also der Basisbaustein aller asynchronen Lösungen, so wie sie heute existieren. In diesem Video zeige ich Ihnen daher das Konzept hinter Thunks, und welche Vorteile schon dieses einfache Prinzip mit sich bringt. Innerhalb meiner IDE lege ich also nun eine Datei mit der Bezeichnung "01_simple_Thunk.js" an. Nun, was ist ein Thunk? Zunächst einmal nutze ich hierfür eine ganz simple Funktion mit der Bezeichnung: multiply. Sie nimmt einen Parameter A und B entgegen, und multipliziert also A mit B. Um sicherzustellen, dass unsere Funktion auch funktioniert, nutze ich "console.log", für einen "multiply" auf die Variablen "3" und "4". Die gute Mathematik gibt uns also nun vor, dass das Resultat von 3 mal 4 gleich 12 ist. Um einen Thunk zu erstellen, versuche ich diese Multiplikation zu kapseln. Ich definiere also eine Funktion "Thunk", die einen Callback entgegennimmt, für mich dann die multiply-Funktion ausführt, mit 3 und 4, allerdings das Ergebnis davon, an den Callback zurückgibt. Die Benutzung des Thunks ist dann relativ intuitiv, indem ich dem Thunk nun die console.log-Funktion übergebe, bekomme ich das gleich Ergebnis, nur nun durch eine zusätzliche Funktion gekapselt. Was nun zunächst wie unnötiger Zusatzaufwand wirkt, macht sich bemerkbar, wenn wir das Ganze als asynchron betrachten. Definieren wir nun eine Funktion "multiply", in dem Fall "async", die den gleichen Vorgang ausführt mit Hilfe einer setTimout-Funktion, also und das Ganze erst in Zukunft ausführen wird, beispielsweise nach 1 Sekunde. Wie jede asynchrone Funktion, nimmt sie dafür einen Callback entgegen, und dieser Callback bekommt dann also das Resultat aus "A mal B". Das Besondere nun am Thunk ist, dass wenn ich den gleichen Thunk nochmal definiere, in diesem Fall nenne ich ihn nun "AThunk" für "async Thunk", so rufe ich den Callback nicht mehr direkt auf, sondern übergebe ihn nun, an die "multiply async"-Funktion. Die Benutzung des "async Thunk", ist genau die Gleiche wie des normalen Thunks. Das heißt, wenn ich nun den normalen Thunk auskommentiere, und das Ganze noch einmal ausführe, bekomme ich wieder das Resultat 12. Egal wie ungewöhnlich nun dieses Vorgehen wirken mag, wir haben es tatsächlich geschafft, synchrone und asynchrone Funktionen in der gleichen Art und Weise darzustellen. Damit ist uns also aus Sicht der Intuitivität, schon mal gelungen, ein gleiches Vorgehen in beiden Fällen zu haben. Wir können uns solche Thunks auch automatisch generieren lassen. Dafür definiere ich nun die Funktion "buildThunk", die eine Funktion als Parameter entgegennimmt. Als nächstes nutze ich die Möglichkeit aus den Argumenten, die für "buildThunk" übergeben werden, den ersten Parameter zu entfernen. Außerdem gebe ich eine neue Funktion zurück, die ähnlich wie der Thunk also, einen Callback entgegennimmt, dann in die Argumentenliste diesen Callback übergibt, und zu guter Letzt, den Funktionsparameter "Thunk", mit "Thunk.apply", "null" und "args", übergibt. Wenn ich mir also dynamisch einen solchen Thunk erzeugen möchte, beispielweise mit dem Titel "myThunk", kann ich die Funktion "buildThunk" benutzen. Als ersten Parameter übergebe ich die jeweilige Funktion, in meinem Fall "multiplyAsync", und die tatsächlichen Parameter 3 und 4, und in Folge kann ich nun den "myThunk" genauso benutzen, wie den zuvor manuell erzeugten. Besonders bemerkenswert an dieser Lösung ist auch, dass der Thunk tatsächlich "lazy" ist. "Lazy" bedeutet also, dass der Wert, der aus dem Aufruf der multiplyAsync-Funktion mit den Parametern 3 und 4 tatsächlich resultieren würde, erst dann tatsächlich berechnet wird, wenn ich den Thunk auch aufrufe. Solange dient er mit nur als Platzhalter, der mir diesen Wert aber in Zukunft garantieren kann. Kennengelernt haben wir den Thunk nun also als geschlossene synchrone Funkion. Geschlossen heißt hier, dass für den Aufruf einen solchen Thunks, bereits alle Angaben der jeweils aufzurufenden Funktion, also wie in unserem Fall, der Multiplizierfunktion, bekannt sind. Und damit keine zusätzliche Parametrisierung mehr stattfinden muss. Damit kommt es also zu einer direkten Rückgabe des Ergebnisses, auf die Funktion, die direkt in den Thunk gegeben wird. Wie in unserem Fall also die console.log-Funktion. Da der Thunk also nun dieses Verhalten kapselt, bezeichnet man ihn auch als "lazy by nature". Außerdem versteckt er die komplexeren Details des Aufrufes und der Parametrisierung, und garantiert uns quasi so, als generischer Ansatz, die Möglichkeit asynchrone Funktionen zu kapseln. Dieses Konzept dient also als die Basis für jede Implementierung von Promises.

JavaScript: Asynchrone Programmierung

Lernen Sie Lösungen für die komplexe Anwendungsentwicklung kennen, um zeitaufwändige Ressourcenzugriife im Code zu vermeiden.

2 Std. 30 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:22.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!