Axios für JavaScript (Node.js): Vollständiger Leitfaden mit Beispielen

Was ist Axios und warum wird es benötigt?

\n\n

Axios ist eine leistungsstarke und beliebte JavaScript-Bibliothek zum Ausführen von HTTP-Anfragen. Sie funktioniert sowohl im Browser als auch in der Node.js-Umgebung und bietet eine einheitliche, benutzerfreundliche API auf Basis von Promise. Wenn Sie eine GET-Anfrage an eine API senden, Daten über POST auf einen Server hochladen oder eine Antwort im JSON-Format verarbeiten müssen – Axios erledigt dies elegant und effizient.

\n\n

Warum Axios anstelle des integrierten fetch oder XMLHttpRequest verwenden?

\n

\n
• Automatische JSON-Verarbeitung: Axios wandelt Antworten automatisch in JSON um, sodass Sie response.json() nicht aufrufen müssen.
\n
• Interceptor: Sie können problemlos globale Logik für alle Anfragen (z. B. Authentifizierungstoken) oder Antworten (z. B. Fehlerbehandlung) hinzufügen.
\n
• Anfragen abbrechen: Integrierte Unterstützung zum Abbrechen von Anfragen über AbortController.
\n
• CSRF-Schutz: Automatische Arbeit mit XSRF-Token zur Erhöhung der Sicherheit.
\n
• Upload-Fortschritt: Möglichkeit, den Fortschritt beim Senden und Empfangen von Daten zu verfolgen.
\n
• Bequeme Fehlerbehandlung: Aussagekräftigere Fehlermeldungen und einfache Unterscheidung von Antwortstatus.
\n
• Unterstützung älterer Browser: Im Gegensatz zu fetch funktioniert Axios im Internet Explorer 11 und anderen veralteten Browsern.
\n

\n\n

Installation

\n\n

Die Installation von Axios in einem Node.js-Projekt oder Frontend-Projekt (über npm/yarn/pnpm) erfolgt mit einem Befehl:

\n\n

# Installation über npm (empfohlen)\nnpm install axios\n\n# Installation über yarn\nyarn add axios\n\n# Installation über pnpm\npnpm add axios\n

\n\n

Für die Verwendung im Browser können Sie Axios auch über ein CDN einbinden:

\n\n

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>\n

\n\n

Schnellstart

\n\n

Nach der Installation können Sie sofort Anfragen stellen. Hier ist ein einfaches Beispiel einer GET-Anfrage an eine öffentliche API:

\n\n

// Bibliothek importieren (für Node.js oder modulare Projekte)\nimport axios from 'axios';\n\n// GET-Anfrage an die JSONPlaceholder API senden\naxios.get('https://jsonplaceholder.typicode.com/posts/1')\n  .then(response => {\n    console.log('Antwortstatus:', response.status);\n    console.log('Daten:', response.data);\n  })\n  .catch(error => {\n    console.error('Anfragefehler:', error.message);\n  });\n

\n\n

Dieser Code sendet eine GET-Anfrage, erhält die Antwort und gibt deren Status sowie den Body aus (der bereits automatisch von JSON in ein JavaScript-Objekt geparst wurde).

\n\n

Wichtige Methoden und Funktionen

\n\n

Axios bietet praktische Wrapper-Methoden für alle wichtigen HTTP-Methoden. Jede von ihnen gibt ein Promise zurück.

\n\n

1. axios.get(url, config?)

\n

Was es tut: Führt eine HTTP-GET-Anfrage aus, um Daten vom Server abzurufen.

\n

Parameter:

\n

\n
• url (string) — Die URL der Anfrage.
\n
• config (object, optional) — Ein Axios-Konfigurationsobjekt (z. B. headers, params für die Query-String, timeout).
\n

\n

Beispiel:

\n

// Anfrage mit Query-Parametern\naxios.get('https://api.example.com/users', {\n  params: {\n    page: 2,\n    limit: 10\n  },\n  headers: {\n    'Authorization': 'Bearer my-token'\n  }\n})\n.then(response => {\n  console.log(response.data);\n});\n

\n\n

2. axios.post(url, data?, config?)

\n

Was es tut: Führt eine HTTP-POST-Anfrage aus, um Daten an den Server zu senden (normalerweise zum Erstellen einer neuen Ressource).

\n<