Axios ist eine bekannte JavaScript-Bibliothek. Es ist ein versprechungsbasierter HTTP-Client für Browser und Node.js. Wenn Sie in den letzten Jahren als JavaScript-Programmierer gearbeitet haben, haben Sie diese Bibliothek auf jeden Fall verwendet. Im Oktober 2019 wurde das Axios-Paket 25 Millionen Mal von npm heruntergeladen. Die Zukunft von Axios scheint wolkenlos zu sein. Aber was ist, wenn ich Ihnen sage, dass Axios ein totes Projekt ist? Genau darum ging es in einer
Diskussion zu Reddit. Wir sprechen nämlich über Folgendes:
- Das Axios GitHub-Repository weist eine sehr geringe Entwickleraktivität auf.
- Probleme und PR werden ignoriert.
- Das Entwicklerteam schweigt.
Die Situation wird durch die viel diskutierte
Verwundbarkeit verschärft. Diese Sicherheitsanfälligkeit wurde im Jahr 2017 gemeldet. Die Autoren des Projekts ignorierten sie für mehr als zwei Jahre.
Als die Axios-Bibliothek populär wurde, verfügten Browser nicht über eine API, die einen versprechungsbasierten HTTP-Client implementiert. Die Standardschnittstelle für XML-HTTP-Anforderungen (XHR) war unpraktisch und schwierig zu handhaben. Die Entwickler haben Axios gerne angenommen, da diese Bibliothek ihr Leben erleichtert hat.
Die Fetch API wurde im Jahr 2015 veröffentlicht. Warum setzen wir Axios 2019 immer noch ein? Vergleichen wir diese beiden Technologien.
Vorlagencodevolumen
▍Holen
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => console.log(json))
▍Axios
axios.get("https://jsonplaceholder.typicode.com/todos/1") .then(response => console.log("response", response.data))
Bei der Verwendung von Fetch müssen Sie zwei Versprechen einhalten. Bei der Arbeit mit Axios haben wir jedoch direkten Zugriff auf das JSON-Ergebnis in der
data Eigenschaft des Antwortobjekts.
Die
body mixin
json() -Methode nimmt einen
Response- Stream und liest ihn vollständig. Es wird ein Versprechen zurückgegeben, das durch das JSON-Ergebnis des Parsens des Nachrichtentexts der Anforderung aufgelöst wird.
Wenn Sie mit POST-Anforderungen arbeiten, müssen Sie in Fetch noch mehr Boilerplate-Code verwenden.
▍Holen
fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify({ title: "Title of post", body: "Post Body" }) }) .then(res => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log(data)) .catch(error => console.log(error));
▍Axios
axios .post("https://jsonplaceholder.typicode.com/posts", { title: "Title of post", body: "Body of post" }) .then(response => console.log(response.data)) .catch(error => console.log(error));
Die Verwendung von Axios vermeidet das Schreiben großer Mengen von Code auf der Kesselplatte und macht den Code sauberer und klarer.
Fehlerbehandlung
▍Holen
fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { if (!response.ok) throw Error(response.statusText); return response.json(); }) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
▍Axios
axios .get("https://jsonplaceholder.typicode.com/todos/100000") .then(response => { console.log("response", response); }) .catch(error => { console.log("error", error); });
Die Axios-Bibliothek meldet Netzwerkfehler, die Fetch-API jedoch nicht. Wenn Sie mit Fetch arbeiten, müssen Sie immer die Eigenschaft
response.ok überprüfen. Um die Lösung dieses Problems zu vereinfachen, kann die Überprüfung dieses Fehlers als separate Funktion ausgegeben werden:
const checkForError = response => { if (!response.ok) throw Error(response.statusText); return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000") .then(checkForError) .then(data => console.log("data", data)) .catch(error => { console.log("error", error); });
Fehlende Funktionen
Axios kann den Fortschritt des Datenuploads überwachen. Fetch unterstützt dies nicht. Dies kann ein entscheidender Faktor bei der Auswahl der Technologie für diejenigen sein, die eine Anwendung entwickeln, mit der Benutzer Fotos oder Videodateien auf den Server hochladen können.
const config = { onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config);
Alternative Bibliotheken
Hier einige Alternativen zu Axios und der Fetch-API:
- Ky ist ein
window.fetch und intelligenter HTTP-Client, der auf window.fetch basiert. - Superagent ist eine kleine progressive HTTP-Client-Bibliothek, die auf
XMLHttpRequest basiert.
Zusammenfassung
Was soll ich 2019 verwenden? Es kommt auf viel an. Wenn Sie beispielsweise den Fortschritt beim Hochladen von Materialien auf einen Server verfolgen müssen, sind Axios oder Superagent am besten für Sie geeignet. Wenn Sie mit den Einschränkungen von Fetch umgehen können, sollten Sie diese API besser verwenden. Und um den Fetch-Code ein wenig zu verbessern, probieren Sie eine Wrapper-Bibliothek wie Ky.
Sehr geehrte Leser! Welche HTTP-Clients verwenden Sie in Ihren Projekten?
