Aus dem Kurs: Node.js Grundkurs

Daten mit fetch holen – Tutorial zu Node.js

Aus dem Kurs: Node.js Grundkurs

Gratismonat starten Für Ihr Team erwerben

Daten mit fetch holen

“

In diesem Video zeige ich Ihnen, wie Sie mithilfe von fetch() Wetterdaten von einer Wetterschnittstelle holen und verarbeiten können. Damit unser Lieferdienst weiß, ob er im T-Shirt oder mit Jacke raus muss, wollen wir uns einen kleinen Server bauen, der kontinuierlich das Wetter anzeigt. Das werden wir in Kapitel 6 auch nochmals hochdynamisch angehen. Sie sehen hier einen Node-Server, der aktuell nur sagt: "Ich habe keine Wetter-Infos". Das wollen wir ändern. Unsere Pizzeria ist in Graz und daher wollen wir das Wetter in Graz haben. Ich habe das bereits vorbereitet, indem ich den geografischen Breitengrad und Längengrad von Graz als Konstante gespeichert habe. Damit werden wir uns das Wetter holen. Und das geht mithilfe der OpenMeteo API. Unter open-meteo.com finden Sie die entsprechenden Informationen. Um an Wetterdaten zu kommen, ruft man api.open-meteo.com auf, dann /v1/forecast und dann gibt man Breitengrad und Längengrad an und setzt current_weather auf true. Den Rest brauchen wir nicht, da wir nur das aktuelle Wetter haben wollen. Wir kopieren diese URL und dann speichern wir diese zuerst: weatherApiUrl. Dann setzen wir den Breitengrad und Längengrad entsprechend von Graz und current_weather=true stimmt, aber den Rest brauchen wir nicht. Jetzt haben wir unsere Anfrage-URL für das Wetter. Und diese Anfrage können wir mithilfe von fetch() ausführen. Dazu schreiben wir fetch(), das ist eine Funktion und die bekommt die URL übergeben. Und das Ergebnis ist ein Promise mit einer Response, aber damit wir jetzt nicht durcheinander kommen, nennen wir das nicht auch noch response, sondern wir nennen das einfach r. Und OpenMeteo gibt ein JSON zurück. Daher sagen wir: Verarbeite diese Response als JSON, damit daraus entsprechend ein JavaScript-Objekt wird. Dabei kommt dann wiederum ein Promise mit dem verarbeiteten Objekt heraus, also das weatherObj. Und das wollen wir dann einfach einmal loggen. Wir gehen auf den Server und laden neu. Dann sehen wir in der Konsole, dass das so weit geklappt hat, wir haben ein Objekt mit Latitude und Longitude und außerdem current_weather mit der aktuellen Temperatur. D.h., im Umkehrschluss, wir kommen an die Temperatur, indem wir schreiben weatherObj.current_weather und dann .temperature. Wir laden noch mal neu. Und jetzt sehen wir nur die Temperatur, 15,4 Grad, und diese wollen wir im Server jetzt anzeigen. Wir geben ja aktuell den weatherString im Server aus. Es wäre also eine Idee, den weatherString hier anzupassen. Das mache ich einmal kurz. Ich sage, der weatherString ist Temperatur in Graz plus die entsprechende Temperatur. Laden wir den Server einmal neu. Wir sehen nichts. Nur immer noch: "Ich habe keine Wetter-Infos". Das Problem kennen wir bereits. Die Anfrage von unserem Server wird mit response.end() beendet, bevor wir überhaupt die Wetterdaten geladen haben. Denn das hier dauert ja alles ein wenig und das läuft asynchron. Es macht also Sinn, diese zwei Zeilen in unser then zu packen. Jetzt laden wir den Server noch mal neu und wir sehen, jetzt funktioniert das. Das einzige Problem, was Sie jetzt noch haben, ist, dass man die Seite selbst aktualisieren müsste, um die aktuellen Wetterdaten zu sehen. In Kapitel 6 sehen Sie dazu eine Lösung mit WebSockets, aber es gäbe auch eine trivialere Lösung. Hier haben wir ja nur einen Server, der Text ausgibt, aber in Kapitel 3 haben wir ja Server gebaut, die HTML ausgegeben haben. Um dann bspw. alle 30 Sekunden an frische Daten zu kommen, könnten Sie in einer HTML im head-Tag einfach meta http-equiv="refresh" und dann content="30" für 30 Sekunden angeben und dann würde die HTML-Seite dafür sorgen, dass sie sich selbst alle 30 Sekunden neu lädt. Und damit wird natürlich dann auch der Server neu angefragt und Sie hätten alle 30 Sekunden frische Daten. Sie wissen nun, wie Sie innerhalb von einem Node-Server asynchron Daten von einer externen Stelle holen und verarbeiten können.

Inhalt