Axios

Was ist Axios?

Axios ist ein beliebter HTTP-Client für den Browser und Node.js, geschrieben in TypeScript. Er bietet eine praktische und moderne API zur Durchführung asynchroner HTTP-Anfragen. Die Bibliothek verarbeitet JSON-Daten automatisch, unterstützt Interceptors, CSRF-Schutz und das Abbrechen von Anfragen.

Wozu braucht man Axios?

Im Gegensatz zum integrierten fetch bietet Axios eine intuitivere Syntax, automatische Datentransformation und eine integrierte Fehlerbehandlung. Es ist ideal für die Erstellung von REST-API-Clients, die Arbeit mit Authentifizierung und das Hochladen von Dateien. Dank der TypeScript-Unterstützung erhalten Sie eine strenge Typisierung aller Anfragen und Antworten.

Installation

Um Axios in einem Projekt zu installieren, verwenden Sie npm oder yarn:

npm install axios# oderyarn add axios

Für die Arbeit mit TypeScript installieren Sie die Typen (normalerweise sind sie bereits enthalten):

npm install @types/axios

Hauptfunktionen

• Unterstützung aller HTTP-Methoden: GET, POST, PUT, DELETE, PATCH und andere.
• Automatische JSON-Serialisierung: Daten werden automatisch umgewandelt.
• Interceptors: Anfragen und Antworten können global verarbeitet werden (z. B. zum Hinzufügen von Tokens).
• Anfragen abbrechen: mittels CancelToken oder AbortController.
• Datei-Upload: Unterstützung des Upload-Fortschritts über onUploadProgress.
• CSRF-Schutz: automatische Arbeit mit Cookies und Headern.
• Typisierung: vollständige TypeScript-Unterstützung mit Generics.

Codebeispiel in TypeScript

Eine grundlegende GET-Anfrage mit Typisierung der Antwort:

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// VerwendunggetUser(1).then(user => console.log(user.name));

Beispiel einer POST-Anfrage mit Datensendung:

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

Beispiel mit einem Interceptor zum Hinzufügen eines Tokens:

import axios from 'axios';

axios.interceptors.request.use(config => {  const token = localStorage.getItem('token');  if (token) {    config.headers.Authorization = `Bearer ${token}`;  }  return config;});

Wann Axios verwenden

Axios ist ideal geeignet für:

• Die Erstellung von Client-Anwendungen mit React, Vue, Angular oder Svelte.
• Node.js-Server, die einen praktischen HTTP-Client benötigen.
• Projekte, bei denen eine strenge TypeScript-Typisierung wichtig ist.
• Situationen, in denen Interceptors, das Abbrechen von Anfragen oder Upload-Fortschritt benötigt werden.

Wenn Sie fetch verwenden und einen prägnanteren Code mit automatischer Fehlerbehandlung wünschen, ist Axios eine ausgezeichnete Wahl.