Axios vs. Fetch: Welches ist das Beste für HTTP-Anfragen?

Es gibt viele Möglichkeiten, HTTP-Anfragen in JavaScript zu stellen, aber zwei der beliebtesten sind Axios und die native fetch() API. In diesem Beitrag werden wir diese beiden Methoden vergleichen und gegenüberstellen, um festzustellen, welche für verschiedene Szenarien besser geeignet ist.

Wesentliche Rolle von HTTP-Anfragen

HTTP-Anfragen sind für die Kommunikation mit Servern und APIs in Webanwendungen von grundlegender Bedeutung. Sowohl Axios als auch fetch() werden häufig verwendet, um diese Anfragen effektiv zu erleichtern. Lassen Sie uns in ihre Funktionen eintauchen und sehen, wie sie sich schlagen.

Was ist Axios?

Axios ist eine Bibliothek eines Drittanbieters, die einen Promise-basierten HTTP-Client zum Senden von HTTP-Anfragen bereitstellt. Es ist für seine Einfachheit und Flexibilität bekannt und wird in der JavaScript-Community häufig verwendet.

Grundlegende Syntax von Axios

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Hauptmerkmale von Axios:

• Konfigurationsflexibilität: Akzeptiert sowohl eine URL als auch ein Konfigurationsobjekt.
• Automatische Datenverarbeitung: Konvertiert Daten automatisch in und von JSON.
• Fehlerbehandlung: Verarbeitet automatisch HTTP-Fehlerstatuscodes und übergibt sie an den Catch-Block.
• Vereinfachte Antwort: Gibt Serverdaten direkt in der Dateneigenschaft des Antwortobjekts zurück.
• Optimiertes Fehlermanagement: Bietet einen optimierten Fehlerbehandlungsmechanismus.

Beispiel:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Warum Axios verwenden?

• Automatische JSON-Datentransformation: Konvertiert Daten nahtlos in und von JSON.
• Antwort-Timeout: Ermöglicht das Festlegen eines Timeouts für Anfragen.
• HTTP-Interceptors:Ermöglicht das Abfangen von Anfragen und Antworten.
• Download-Fortschritt: Verfolgt den Fortschritt von Downloads und Uploads.
• Gleichzeitige Anfragen: Bearbeitet mehrere Anfragen gleichzeitig und kombiniert Antworten.

Was ist Fetch?

fetch() ist eine in modernes JavaScript integrierte API, die von allen modernen Browsern unterstützt wird. Es handelt sich um eine asynchrone Web-API, die Daten in Form von Versprechen zurückgibt.

Funktionen von fetch():

• Grundlegende Syntax: Einfach und prägnant, akzeptiert eine URL und ein optionales Optionsobjekt.
• Abwärtskompatibilität: Kann in älteren Browsern mit Polyfills verwendet werden.
• Anpassbar: Ermöglicht detaillierte Kontrolle über Header, Text, Methode, Modus, Anmeldeinformationen, Cache, Weiterleitung und Referrer-Richtlinien.

So verwenden Sie Axios zum Stellen von HTTP-Anfragen

Installieren Sie zunächst Axios mit npm oder Yarn:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Sie können Axios auch über ein CDN einbinden:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

So verwenden Sie Axios, um eine GET-Anfrage zu stellen:

npm install axios
# or
yarn add axios
# or
pnpm install axios

HTTP-Anfragen mit Fetch stellen

Da fetch() integriert ist, müssen Sie nichts installieren. So stellen Sie eine GET-Anfrage mit fetch():

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Beachten Sie Folgendes:

• Datenverarbeitung: Axios wandelt die Daten automatisch in und von JSON um, während Sie bei fetch() manuell Response.json() aufrufen müssen.
• Fehlerbehandlung: Axios behandelt Fehler innerhalb des Catch-Blocks, während fetch() das Versprechen nur bei Netzwerkfehlern ablehnt, nicht bei HTTP-Statusfehlern.

Grundlegende Syntax von Fetch

import axios from 'axios';

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

Hauptmerkmale:

• Einfache Argumente: Akzeptiert eine URL und ein optionales Konfigurationsobjekt.
• Manuelle Datenverarbeitung:Erfordert manuelle Konvertierung von Daten in Zeichenfolgen.
• Antwortobjekt: Gibt ein Antwortobjekt zurück, das vollständige Antwortinformationen enthält.
• Fehlerbehandlung: Erfordert eine manuelle Überprüfung der Antwortstatuscodes auf HTTP-Fehler.

Beispiel:

fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Vergleich von Axios und Fetch

Senden von GET-Anfragen mit Abfrageparametern

Axios:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Abrufen:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Senden von POST-Anfragen mit einem JSON-Body

Axios:

axios.get('/api/data', { params: { name: 'Alice', age: 25 } })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Abrufen:

const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Festlegen eines Timeouts für die Anfrage

Axios:

axios.post('/api/data', { name: 'Bob', age: 30 })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Abrufen:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 })
})
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Verwendung der async/await-Syntax

Axios:

axios.get('/api/data', { timeout: 5000 }) // 5 seconds
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Abrufen:

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // abort after 5 seconds

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Abwärtskompatibilität

Axios:

• Muss installiert und in Ihr Projekt eingebunden werden.
• Unterstützt ältere Browser mit Polyfills für Versprechen und anderen modernen JavaScript-Funktionen.
• Aktiv gewartet, um die Kompatibilität mit neuen Umgebungen zu gewährleisten.

Abrufen:

• Native Unterstützung in modernen Browsern.
• Kann mehrfach ausgefüllt werden, um ältere Browser zu unterstützen.
• Automatisch von Browser-Anbietern aktualisiert.

Fehlerbehandlung

Axios:

Behandelt Fehler im Catch-Block und betrachtet jeden Statuscode außerhalb von 2xx als Fehler:

async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

Abrufen:

Erfordert eine manuelle Statusprüfung:

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs. Fetch: Welches ist das Beste?

Es gibt keine definitive Antwort, da es von Ihren Anforderungen abhängt:

• Verwenden Sie Axios, wenn Sie Funktionen wie automatische JSON-Datentransformation, HTTP-Interceptors und erweiterte Fehlerbehandlung benötigen.
• Verwenden Sie fetch(), wenn Sie eine native, schlanke Lösung mit umfangreichen Anpassungsoptionen wünschen.

Generieren Sie Axios/Fetch-Code mit EchoAPI

EchoAPI ist eine umfassende kollaborative API-Entwicklungsplattform, die Tools zum Entwerfen, Debuggen, Testen und Verspotten von APIs bietet. EchoAPI kann automatisch Axios-Code für HTTP-Anfragen generieren.

Schritte zum Generieren von Axios-Code mit EchoAPI:

1. Öffnen Sie EchoAPI und erstellen Sie eine neue Anfrage.

2. Geben Sie den API-Endpunkt, Header und Parameter ein und klicken Sie dann auf „Code-Snippet“.

3. Wählen Sie „Client-Code generieren“.

4. Kopieren Sie den generierten Axios-Code und fügen Sie ihn in Ihr Projekt ein.

Abschluss

Sowohl Axios als auch fetch() sind leistungsstarke Methoden zum Senden von HTTP-Anfragen in JavaScript. Wählen Sie diejenige aus, die den Anforderungen und Vorlieben Ihres Projekts am besten entspricht. Der Einsatz von Tools wie EchoAPI kann Ihren Entwicklungsworkflow verbessern und sicherstellen, dass Ihr Code präzise und effizient ist. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonAxios vs. Fetch: Welches ist das Beste für HTTP-Anfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!