Was ist der Unterschied zwischen Axios und Fetch?

Ich rufe den Webdienst mit Fetch auf, aber das gleiche kann ich mit Hilfe von Axios tun. Jetzt bin ich also verwirrt. Soll ich entweder Axios oder Hol holen?

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.

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:

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

Ich denke, Sie sollten Axios verwenden.

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).

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.

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.

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