Flutter -- Async Await Part 2

Im ersten Teil dieses Artikels haben wir eine kleine Einführung zum Thema asynchrone Funktionen gemacht. Ebenso ist dort Code enthalten, der als Startpunkt dient, uns das Ganze anhand eines realen Beispiels anzuschauen.
Das Hauptaugenmerk legen wir dabei auf die zwei Schlüsselwörter async und await. Um unser Beispiel lauffähig zu machen, müssen wir die notwendigen Librarys importieren. Das sind:


  1. import: "Dart.convert"; Diese Library ermöglicht uns die Verarbeitung von Json Daten. Ich werde in diesem Artikel aber nicht weiter darauf eingehen.
  2. import: "package:http/http.dart as http"; Diese Package benötigen wir für den Zugriff auf eine Internetadresse. Zu diesem Thema in einem zukünftigen Artikel mehr. 
Der Code wurde also ergänzt um die notwendigen Library Importe, wobei weite Teile des Codes gleich bleiben. Die wichtigsten Änderungen sind im folgenden Abschnitt zu finden:





Der String zeichenKette wurde mit einem leeren String initialisiert. Würde man das nicht tun, gäbe es im späteren Verlauf des Programmes Probleme, dazu später mehr. In der initState() Funktion wird unsere textVomServer() Funktion aufgerufen. Diese wird mit dem Schlüsselwort async vor dem Funktionskörper asynchron. In ihr hat der Aufruf await client.get(url,); eine besondere Bedeutung. Await führt dazu, das das Programm wartet bis client.get(url) ein Resultat liefert, entweder Daten oder einen Fehler. Wichtig ist dabei, das await nur in einer async Funktion verwendet werden kann.

Wie sieht der Programmablauf aber genau aus:


    1. Im StatelessWidget wird die initState() Funktion aufgerufen. In ihr wird die textVomServer() Funktion ausgeführt, eine asynchrone Funktion. Zu guter letzt wird die super.initState() Funktion ausgeführt, also des Elternobjekts. 
    2. Da textVomServer asynchron ist, enthält die Zeichenkette am Anfang noch kein Resultat. Wir haben sie aber mit einem leeren String initialisiert, so das der weitere Programmablauf nicht gestoppt wird. D.h. der Scaffold wird mit einer Build Methode erstellt und die leere Zeichenkette verwendet.
    3. sobald aber client.get(url) ein Resultat liefert, wird dieses innerhalb einer setState() Funktion in die Zeichenkette geschrieben und ein neues Build ausgelöst.
Wer sich den gesamten Code anschauen möchte...zu dem geht es hier lang ! Weitere interessante Artikel zu diversen Themen Flutter betreffend, findet man auf meiner Seite mit einer Linksammlung!

Kommentare

Beliebte Posts aus diesem Blog

Material Design in Flutter Teil 2

Flutter -- ohne Dart geht es nicht 2 -- einfache Variablen Typen

Dart Final Const