Als weitgehend autodidaktischer Entwickler habe ich die weite Welt der kostenlosen/bezahlten Internet-Tutorials auf Herz und Nieren geprüft. Etwas, das immer wieder in Tutorials auftaucht, die HTTP-Anfragen durchführen, ist die Verwendung einer JavaScript-Bibliothek namens Axios. Ich wollte verstehen, warum eine so große Anzahl von Webentwicklungslehrern diese scheinbar unscheinbare Bibliothek verwendet. Also habe ich mich entschlossen, eine sehr einfache, geradlinige Erklärung zu liefern, was Axios bietet und warum es sich (wahrscheinlich) lohnt, es zu benutzen.
Was es tut
In einer Nussschale ist Axios eine Javascript-Bibliothek, die verwendet wird, um HTTP-Anfragen von node.js oder XMLHttpRequests vom Browser zu machen, die auch die ES6 Promise API unterstützt. Großartig, daraus schließen wir, dass es etwas tut, das wir bereits tun können und das kürzlich deutlich verbessert wurde… Warum also die Mühe?
Was es verbessern soll: .fetch()
Fetch verwendet einen zweistufigen Prozess beim Umgang mit JSON-Daten; nach einer anfänglichen Anfrage müssen Sie dann die .json()-Methode für die Antwort aufrufen, um das eigentliche Datenobjekt zu erhalten. Wenn ich eine Fetch-Anfrage stellen würde, um ein Objekt mit relevanten Fahrern für meine Mitfahrzentrale zurückzubekommen, könnte das in etwa so aussehen:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Dies würde ein ausstehendes Versprechen und ein Antwortobjekt zurückgeben, das mir mitteilt, dass meine Anfrage erfolgreich war, aber wo sind meine Daten?! Wir müssen daran denken, unsere Antwort auch an die .json()-Methode zu übergeben.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Das ist keine große Sache, denn wie bei vielen anderen Dingen geht es nur darum, sich die Syntax zu merken. Aber als Entwickler sind wir gleichzeitig die faulsten und effizientesten Kreaturen auf dem Planeten – also ist jede Art von Kurzschrift oder Zeitersparnis eine Überlegung wert, so Axios.
Bessere Fehlerbehandlung
Es gibt etwas zusätzliche Arbeit, die wir auf unserer Seite investieren müssen (auch hier könnte man argumentieren, dass es sich nur um eine Frage der Syntaxerinnerung handelt), um das gewünschte Ergebnis zu erzielen, wenn es darum geht, Antwortfehler mit .fetch() richtig zu protokollieren. MDN erklärt:
Ein
fetch()Versprechen wird mit einemTypeErrorzurückgewiesen, wenn ein Netzwerkfehler auftritt oder CORS auf der Serverseite falsch konfiguriert ist, obwohl dies in der Regel Berechtigungsprobleme oder Ähnliches bedeutet – ein 404 stellt zum Beispiel keinen Netzwerkfehler dar.
Angenommen, mit unserer baseUrl-Variable stimmt etwas nicht. Die erwartete Ausgabe für den folgenden Codeblock wäre ein Fehler, aber stattdessen ist sie in Ordnung. Warum ist das so?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Es stellt sich heraus, dass fetch() nur in relativ seltenen Netzwerkfehlersituationen wie einem DNS-Lookup-Fehler Versprechen zurückweist. Glücklicherweise bietet fetch() ein einfaches ok Flag, das anzeigt, ob der Statuscode einer Antwort im erfolgreichen Bereich liegt oder nicht. Im Allgemeinen werden Sie am Ende eine einheitliche Fehlerbehandlungsfunktion schreiben, die für alle Ihre fetch()-Aufrufe verwendet wird.
Installation von Axios
Das Einbinden neuer Bibliotheken ist heutzutage kinderleicht (Mmm… Rhabarber), ich bevorzuge npm. Öffnen Sie im Stammverzeichnis Ihres Projekts ein Terminal, führen Sie npm install axios aus und schon sind Sie fertig. Um nun die gleiche Abrufanforderung zu erreichen, die wir zuvor durchgeführt haben, können wir axios.get() anstelle unserer Abrufmethode wie folgt aufrufen:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Durch die Verwendung von Axios entfällt die Notwendigkeit, die Ergebnisse der HTTP-Anfrage an die Methode .json() zu übergeben. Axios gibt einfach das Datenobjekt zurück, das Sie direkt erwarten. Außerdem wird bei jeder Art von Fehler bei einer HTTP-Anfrage der .catch()-Block sofort erfolgreich ausgeführt. Hier ist ein kurzer Überblick über alle primären Funktionen, einschließlich einiger, die ich nicht direkt auf der GitHub-Seite beschrieben habe:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Unterstützt die Promise API
- Abfangen von Anfrage und Antwort
- Transformieren von Anfrage- und Antwortdaten
- Abbrechen von Anfragen
- Automatische Transformationen für JSON-Daten
- Client-seitige Unterstützung für den Schutz gegen XSRF
Zusammenfassend ist Axios mehr eine Verbesserung der Lebensqualität als alles andere. Aber wenn man viele kleine, inkrementelle Anpassungen an seinem Arbeitsablauf vornimmt, kann man die Entwicklungsqualität und -geschwindigkeit drastisch verbessern.