Was ist der Unterschied zwischen Axios und Fetch?

Antworten:

164

Fetch und Axios sind sich in der Funktionalität sehr ähnlich, aber für mehr Abwärtskompatibilität scheint Axios besser zu funktionieren (Fetch funktioniert beispielsweise in IE 11 nicht, lesen Sie diesen Beitrag ).

Wenn Sie mit JSON-Anforderungen arbeiten, sind die folgenden Unterschiede aufgeführt, auf die ich gestoßen bin.

JSON-Post-Anfrage abrufen

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON-Post-Anfrage

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

So:

  • Fetch's body = Axios ' Daten
  • Fetch's Körper muss stringifiziert werden , Axios 'Daten enthalten das Objekt
  • Fetch hat keine URL im Anforderungsobjekt, Axios hat eine URL im Anforderungsobjekt
  • Die Abrufanforderungsfunktion enthält die URL als Parameter , die Axios-Anforderungsfunktion enthält die URL nicht als Parameter .
  • Abrufanforderung ist ok , wenn Antwortobjekt das enthält ok Eigenschaft ist Axios Anfrage ok , wenn Status 200 und status ist ‚OK‘
  • So erhalten Sie die Antwort auf das json-Objekt: Rufen Sie beim Abrufen die Funktion json () für das Antwortobjekt auf, und rufen Sie in Axios die Dateneigenschaft des Antwortobjekts ab.

Hoffe das hilft.

c-chavez
quelle
Hier ist mehr Frage. Wenn responseOk wahr ist, müssen wir den Status in response.data überprüfen, wenn der Status angegeben ist? danke
Yang Wang
1
Axios request is ok when status is 200 and statusText is 'OK' Was ist mit anderen httpStatus im 2xx-Bereich wie 201 oder 204?
Leonbloy
46

Sie sind HTTP-Anforderungsbibliotheken ...

Am Ende habe ich den gleichen Zweifel, aber die Tabelle in diesem Beitrag bringt mich dazu, mitzumachen isomorphic-fetch. Welches ist fetchaber funktioniert mit NodeJS.

http://andrewhfarmer.com/ajax-libraries/


Der obige Link ist tot. Dieselbe Tabelle befindet sich hier: https://www.javascriptstuff.com/ajax-libraries/

Oder hier: Geben Sie hier die Bildbeschreibung ein

Lucas Katayama
quelle
6
Trotzdem kann ich den Vorteil des Abrufens gegenüber Axios nicht finden. Können Sie eine Idee haben, warum ich mit den Axios gehen sollte?
Gorakh Nath
4
Ich denke, Fetch ist ein Standard, siehe fetch.spec.whatwg.org ... Axios könnten mehr Funktionen haben, weil es nicht folgt ... Ich denke, am Ende machen sie die Grundlagen (Ajax http-Anfrage), aber es kommt darauf an auf was Sie brauchen ... Ich brauchte keinen Transformator ... also ist es ein Profi, eine Standardbibliothek zu bekommen ...
Lucas Katayama
4
Beachten Sie, dass diese Tabelle irreführend ist. Es wird fetchals nativ definiert ( dh Sie können es einfach verwenden - es muss keine Bibliothek entsprechend der Tabellenquelle hinzugefügt werden), während fetches auf einigen Plattformen (insbesondere in allen Versionen von IE), für die Sie eine angeben müssen, nicht implementiert ist externe Polyfüllung sowieso.
Luca Fagioli
3
Zusätzlich zu dem von @ jack123 erwähnten Unterschied bietet fetch auch keine grundlegende Ajax-Funktionalität, da timeoutwir (was sehr seltsam ist) ein separates Modul verwenden müssen, um diese grundlegende Funktionalität zu implementieren.
Apurva Jain
2
@ LucasKatayama Der Link scheint gebrochen zu sein
Vancy-Pants
30

Laut mzabriskie auf GitHub :

Insgesamt sind sie sehr ähnlich. Einige Vorteile von Axios:

  • Transformatoren: Ermöglichen die Durchführung von Transformationen für Daten, bevor eine Anforderung gestellt wird oder nachdem eine Antwort empfangen wurde

  • Interceptors: Mit dieser Option können Sie die Anforderung oder Antwort vollständig ändern (auch Header). Führen Sie außerdem asynchrone Vorgänge aus, bevor eine Anforderung gestellt wird oder bevor Promise ausgeführt wird

  • Eingebauter XSRF- Schutz

Bitte überprüfen Sie Browser Support Axios

Geben Sie hier die Bildbeschreibung ein

Ich denke, Sie sollten Axios verwenden.

Thilina Sampath
quelle
4
Einverstanden. Axios ist auch ein kleiner Enuff-Import, so dass Aufblähen kein großes Problem darstellt - im Gegensatz zu etwas wie Express oder Mungo, bei dem man sich Sorgen machen kann, wenn man ein bisschen verrückt nach der Packungsgröße ist. :)
CodeFinity
1
Bitte setzen Sie legitime Änderungen nicht zurück und kopieren Sie Inhalte nicht ohne Namensnennung.
Jonrsharpe
9

Ein weiterer wesentlicher Unterschied zwischen der Abruf-API und der Axios-API

  • Während der Verwendung von Service Worker müssen Sie nur die Abruf-API verwenden wenn Sie die HTTP-Anforderung abfangen möchten
  • Ex. Während Sie das Caching in PWA mit Service Worker durchführen, können Sie nicht zwischenspeichern, wenn Sie die Axios-API verwenden (dies funktioniert nur mit der Abruf-API).
Vaibhav Bacchav
quelle
6
Kann jemand überprüfen, ob dies wirklich wahr ist? Es ist 1 Person, aber die 9 Upvotes scheinen zuzustimmen, aber es wäre schön, Kommentare dazu zu sehen (ich benutze Axios mit Servicemitarbeiter pwa offline, deshalb frage ich.
Tom Stickel
Sicher, wir können noch einige Kommentare dazu abgeben, aber ich hatte Probleme mit dem Caching bei der Verwendung von Axios und als ich Axios durch fetch () APIs ersetzte, wurde es behoben
Vaibhav Bacchav
Dies scheint richtig zu sein, könnte aber in naher Zukunft behoben werden: github.com/axios/axios/pull/2891
arkhz
7

Axios ist ein eigenständiges Paket von Drittanbietern, das mithilfe von NPM problemlos in ein React-Projekt installiert werden kann.

Die andere Option, die Sie erwähnt haben, ist die Abruffunktion. Im Gegensatz zu Axiosfetch() ist es in den meisten modernen Browsern integriert. Mit fetch müssen Sie kein Paket eines Drittanbieters installieren.

Es liegt also an Ihnen, fetch()ob Sie nicht wissen, was Sie tun, oder ob Sie Axios verwenden, was meiner Meinung nach einfacher ist.

Daniel
quelle
1
Fetch ist in Ordnung, aber Axios ist wie gesagt - einfacher. Das, was in moderne Browser integriert ist (Fetch), ist für Feature-Releases nicht besonders gut. - Also bevorzuge ich Axios
Tom Stickel
5

Außerdem ... habe ich in meinem Test mit verschiedenen Bibliotheken herumgespielt und festgestellt, dass sie mit 4xx-Anfragen unterschiedlich umgehen. In diesem Fall gibt mein Test ein JSON-Objekt mit einer Antwort von 400 zurück. So behandeln 3 beliebte Bibliotheken die Antwort:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

Interessant ist das request-promise-nativeund axios4xx Antwort auf, während node-fetchnicht. Auch fetchverwendet ein Versprechen für json Parsing.

Cyberwombat
quelle
1
@baitun diese sind von mir Unit-Tests, die (ich glaube, ich habe Mocha verwendet) oft eine .throwsMethode zum Testen von Fehlern haben. In diesem Fall habe ich Ablehnungen von allen 3 Bibliotheken getestet und den Unterschied in den zurückgegebenen Daten festgestellt.
Cyberwombat
3

Vorteile von Axios:

  • Transformatoren: Ermöglichen die Durchführung von Transformationen für Daten, bevor eine Anforderung erfolgt oder nachdem eine Antwort empfangen wurde
  • Interceptors: Mit dieser Option können Sie die Anforderung oder Antwort vollständig ändern (auch Header). Führen Sie außerdem asynchrone Vorgänge aus, bevor eine Anforderung erfolgt oder bevor das Versprechen erfüllt wird
  • Eingebauter XSRF-Schutz

Vorteile von axiosüberfetch

Jairo Malanay
quelle