Portugiesische Version

Axios und Fetch sind beliebte Tools zum Erstellen von HTTP-Anfragen in JavaScript, weisen jedoch einige wesentliche Unterschiede auf. Hier ist eine Zusammenfassung:

Axios

• Integrierte Funktionen: Axios verfügt über viele integrierte Funktionen, wie z. B. automatische JSON-Transformation, Anforderungs- und Antwort-Interceptoren und Anforderungsstornierung.
• Browserkompatibilität: Unterstützt ältere Browser, einschließlich Internet Explorer.
• Fehlerbehandlung: Axios lehnt Zusagen für HTTP-Fehlerstatus (z. B. 404 oder 500) automatisch ab, was die Fehlerbehandlung erleichtert.
• Request/Response Interceptors: Ermöglicht Ihnen, Anfragen oder Antworten auf einfache Weise global zu ändern.
• Stornierung von Anfragen: Axios bietet eine einfache Möglichkeit, Anfragen zu stornieren.

Bringen

• Native API: Fetch ist eine native Web-API, sodass keine zusätzlichen Bibliotheken installiert werden müssen.
• Versprechensbasiert: Verwendet Versprechen, aber Sie müssen den Antwortstatus manuell auf Fehler überprüfen.
• Stream-Verarbeitung: Fetch unterstützt Streaming, was für die Verarbeitung großer Antworten nützlich sein kann.
• Mehr Kontrolle: Bietet mehr Kontrolle über Anfragen, erfordert aber mehr zusätzlichen Code für Funktionen wie das Festlegen von Mustern oder das Abfangen von Anfragen.
• Keine integrierte Unterstützung für JSON: Sie müssen .json() für das Antwortobjekt aufrufen, um JSON-Daten zu analysieren.

Anwendungsfälle

• Verwenden Sie Axios, wenn Sie einen umfangreichen Satz sofort einsatzbereiter Funktionen benötigen, insbesondere für komplexe Anwendungen.
• Verwenden Sie Fetch für einfachere Anwendungsfälle oder wenn Sie externe Abhängigkeiten vermeiden möchten.

Anwendungsbeispiel

Axios:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Bringen:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Hinweise:

• Um Daten zu senden, verwendet fetch() die Body-Eigenschaft für eine POST-Anfrage, während Axios die Data-Eigenschaft verwendet.
• Die Daten in fetch() werden mithilfe der JSON.stringify-Methode in einen String umgewandelt.
• Axios wandelt die vom Server zurückgegebenen Daten automatisch um, aber mit fetch() müssen Sie die Methode „response.json()“ aufrufen, um die Daten in ein JavaScript-Objekt zu analysieren.
• Mit Axios kann auf die vom Server bereitgestellte Datenantwort innerhalb des Datenobjekts zugegriffen werden, während in der fetch()-Methode die endgültigen Daten mit einer beliebigen Variablen benannt werden können.

Abschluss

Beide haben ihre Stärken und die Wahl hängt oft von Ihren spezifischen Bedürfnissen und Vorlieben ab. Wenn Sie eine größere Anwendung mit vielen API-Interaktionen erstellen, kann Axios einige Aufgaben erleichtern, während Fetch sich hervorragend für einfache Aufgaben eignet.

Axios bietet eine benutzerfreundliche API, die die meisten HTTP-Kommunikationsaufgaben vereinfacht. Wenn Sie jedoch lieber native Browserfunktionen verwenden möchten, können Sie ähnliche Funktionen mit der Fetch-API auf jeden Fall selbst implementieren.

Wie wir untersucht haben, ist es durchaus möglich, die Kernfunktionen von Axios mithilfe der in Browsern verfügbaren fetch()-Methode zu replizieren. Die Entscheidung, eine Client-HTTP-Bibliothek einzubinden, hängt letztendlich von Ihrem Komfort mit nativen APIs und den spezifischen Anforderungen Ihres Projekts ab.

Weitere Informationen: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59