Was ist der Unterschied zwischen Axios und Fetch?

Fetch und Axios sind in ihrer Funktionalität sehr ähnlich, aber für mehr Rückwärtskompatibilität scheint Axios besser zu funktionieren (Fetch funktioniert nicht in IE 11 zum Beispiel check this post )

Wenn Sie mit JSON-Anforderungen arbeiten, sind im Folgenden einige Unterschiede, mit denen ich gestolpert bin.

JSON-Post-Request 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-Anforderung

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 body = Axios 'data
• Der Körper des Abrufs muss stringified sein, die Daten von Axios enthalten das Objekt
• Hat keine URL im Anforderungsobjekt, Axios hat URL im Anforderungsobjekt
• Die Abrufanforderungsfunktion enthält die URL als Parameter, die Axios-Anforderungsfunktion enthält die URL nicht als Parameter.
• Die Abrufanforderung ist ok, wenn das Antwortobjekt die ok-Eigenschaft enthält, die Axios-Anforderung ist ok, wenn Status ist 200 und StatusText ist 'OK'
• So rufen Sie die Antwort des json-Objekts ab: Rufen Sie beim Abrufen die Funktion json () für das Antwortobjekt auf. Rufen Sie in Axios data-Eigenschaft des Antwortobjekts ab.

Hoffe das hilft.

Laut mzabriskieauf GitHub :

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

• Transformatoren: Ermöglichen die Durchführung von Transformationen an Daten, bevor eine Anforderung erfolgt oder nachdem eine Antwort empfangen wurde

• Interceptors: Damit können Sie die Anfrage oder Antwort vollständig ändern (auch Header). Führen Sie auch asynchrone Operationen aus, bevor eine Anforderung .__ ist. gemacht oder bevor Versprechen abrechnet

• Eingebauter XSRF Schutz

Ich denke, du solltest Axios verwenden.

War auch neugierig, fand Ihre Frage hier und fand dann diesen Medium-Beitrag, der sich als hilfreich erweisen könnte. Fetch scheint ein wenig ausführlicher und unerbittlicher zu sein: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte

Noch ein Hauptunterschied zwischen Fetch API und Axios API

• Wenn Sie Service Worker verwenden, müssen Sie nur Abruf-API verwenden, wenn Sie die HTTP-Anforderung abfangen möchten
• Ex. Bei der Ausführung des Cachings in PWA mit Service Worker können Sie keine Caches erstellen, wenn Sie die Axios-API verwenden (dies funktioniert nur mit der Fetch-API).

Außerdem ... Ich habe in meinem Test mit verschiedenen Bibliotheken herumgespielt und festgestellt, dass 4xx Anfragen unterschiedlich behandelt werden. In diesem Fall gibt mein Test ein Json-Objekt mit einer 400-Antwort zurück. So handhaben 3 populäre 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, dass request-promise-native und axios auf die Antwort 4xx werfen, während node-fetch dies nicht tut. Auch fetch verwendet ein Versprechen für das Parsing von Json. 

Vorteile von Axios:

• Transformers: Ermöglichen das Durchführen von Transformationen für Daten, bevor eine Anforderung erfolgt oder nachdem eine Antwort empfangen wurde
• Interceptors: Ermöglichen es Ihnen, die Anfrage oder Antwort vollständig zu ändern (auch Header). Führen Sie außerdem asynchrone Vorgänge durch, bevor eine Anforderung eingeht oder bevor das Versprechen erfüllt wird
• Eingebauter XSRF-Schutz

Vorteile von axios gegenüber fetch

axios und Fetch werden häufig in React-Anwendungen zum Verwalten von Netzwerkanforderungen und zum Verwalten einer bestimmten Datenmenge verwendet.

axios ist ein eigenständiges Drittanbieter-Paket, das mit NPM einfach in ein React-Projekt installiert werden kann.

Die andere Option, die Sie erwähnt haben, ist die Abruffunktion. Dies ist kein Paket, sondern eine einzigartige Funktion, die in die meisten modernen Browser integriert ist. Mit fetch müssen Sie kein Paket eines Drittanbieters installieren.

Daher ist die Code-Menge etwas geringer, wenn Sie die Funktion Abrufen über Axios verwenden. Abrufen ist jedoch eine einfachere Funktion auf niedrigerer Ebene, die zum Abrufen von Daten verwendet wird. Es ist nicht das Schlimmste auf der Welt, aber wenn Sie fetch verwenden, werden Sie am Ende eine Menge Code schreiben, der bereits für Sie in axios geschrieben wurde.

So ist es eine Wahl zwischen einem D.I.Y. Wenn Sie nicht wissen, was Sie tun OR, verwenden Sie einfach Axios und alle Muttern und Schrauben werden für Sie erledigt.

Ich verwende Axios persönlich für alle meine Projekte, da Axios Netzwerkanfragen auf vorhersagbare Art und Weise verarbeitet, im Gegensatz zu einigen Eckfällen mit Abruf, die keine großartige Erfahrung darstellen.