Ich bin ein Student der Softwaretechnik an der Flatiron School, der sich derzeit am Ende von Phase-1 befindet. Phase eins ist ein intensiver 3-wöchiger Streifzug, bei dem von den Schülern erwartet wird, dass sie so viele Informationen wie möglich über Javascript, HTML und CSS behalten. Obwohl die letzteren 2 für eine Website unerlässlich sind, um ihren Inhalt zu präsentieren, wird die Seite mit JS wirklich lebendig. Die Schlüsselkonzepte, die ich in JS gelernt habe, waren die DOM-Manipulation, das Abhören von Ereignissen und das Abrufen des Themas dieses Blogs. Abrufen ist eine asynchrone Funktion(), die es Entwicklern ermöglicht, sowohl mit lokalen als auch mit externen Datenquellen zu interagieren, um Daten abzurufen, hinzuzufügen, zu löschen und zu ändern. DAS IST KRAFTVOLL.

Holen erklärt

Standardmäßig ist eine Fetch-Anforderung eine Get-Anforderung, sofern nicht anders angegeben (POST, DELETE, PATCH). Unten habe ich eine beispielhafte Fetch-Anfrage von MDN erstellt :

1) fetch(' http://example.com/movies.json' )

Zeile eins sendet eine Anfrage an die Domain example.com und zielt speziell auf die Daten ab, die in movies.json gespeichert sind.

2) .then((Antwort) => Antwort.json())

Der Server gibt ein Versprechen zurück, auf das wir über das Antwortschlüsselwort zugreifen können. Das Versprechen ist eine abstrakte Art zu sagen, dass der Server die gesuchten Daten gefunden hat und sie Ihnen zur Verfügung stellen wird. Die Antwort kann im Allgemeinen nicht manipuliert werden, da es sich um eine Darstellung der von Ihnen benötigten Daten handelt. Um mit Ihren angeforderten Daten arbeiten zu können, muss die Antwort in ein Format Ihrer Wahl geparst werden. Das Parsen in json wird in diesem speziellen Fall durch Aufrufen der Funktion .json() erreicht.

3) .then((data) => console.log(data));

Im letzten Schritt wird die geparste response.json() dem Namen data neu zugewiesen , und der Inhalt von data kann in Ihrem Entwicklungsterminal oder im Konsolen-Tab Ihres Browser-Entwicklertools angezeigt werden.

Abrufen und APIs

Zum Abschluss unserer Reise in Phase eins wurden Mitglieder meiner Kohorte und ich mit der Aufgabe beauftragt, eine Single-Page-Anwendung zu erstellen. Unsere wichtigsten Ergebnisse erforderten, dass unsere SPA die Verwendung von 3 Ereignis-Listenern, die DOM-Manipulation und das Abrufen an eine lokale oder externe API demonstrierte. Die Arbeit mit einer API war eine dreistufige Herausforderung. Wir müssen herausfinden, wie wir mit unserer anfänglichen GET-Anfrage auf die erforderlichen Daten zugreifen, wie wir richtig auf die Daten in der Antwort zugreifen und die Antwort manipulieren, um Daten in unsere Website zu integrieren. Der Prozess regte zum Nachdenken an und führte zur Schaffung von QWALLET.

Schamloser Plug – QWALLET

QWALLET ist eine digitale Brieftasche, in der die Sammlung von QR-Codes des Benutzers gehostet wird. QR steht für „Quick Response“ und ist eine einfach zu scannende grafische Darstellung der persönlichen Informationen des Benutzers. QR-Codes können private und geschäftliche WLAN-Passwörter, Links zu Social-Media-Websites, Zahlungskonten und vieles mehr kodieren. Wie haben wir das erreicht? Wir haben eine kostenlose QR-Generierungs-API verwendet. In unserer Abrufanforderung an die API musste die URL den spezifischen Text enthalten, den wir codieren wollten. Wir haben dies bereitgestellt, indem wir die Benutzereingabe in einem Formularübermittlungsereignis verwendet und diese Informationen in die URL der Abrufanforderung interpoliert haben. Als Antwort erhielten wir eine URL zu einer PNG-Datei. Anschließend haben wir ein HTML-Image-Tag erstellt, die zurückgegebene URL der Quelle des Image-Tags zugewiesen und an das DOM angehängt. Um QR-Codes wiederzuverwenden, haben wir einen lokalen JSON-Server mit node.js erstellt und den Abruf mit der POST-Methode aufgerufen. Dadurch wurde der neue QR-Code auf unserem lokalen Server gespeichert und für die zukünftige Verwendung aufbewahrt. Auf ähnliche Weise haben wir fetch mit einer DELETE-Methode aufgerufen, um veraltete QR-Codes zu entfernen.

Einpacken

Das Erlernen von Fetch und die Implementierung seiner Kernmethoden sowie die Interaktion mit einer externen und lokalen API war eine lehrreiche Erfahrung. Und das Schreiben über den gesamten Prozess hat wirklich dazu beigetragen, die während dieses Teamprojekts gelernten Konzepte zu festigen. Besonderer Dank gilt meinen Teammitgliedern Adam, Rochelle und Veronique für die Bereitstellung einer Klinik für effektive Zusammenarbeit und zeitnahe Ausführung.