Axios

Was ist Axios?

Axios ist ein beliebter HTTP-Client auf Promise-Basis für den Browser und Node.js, geschrieben in TypeScript. Er bietet eine bequeme und leistungsstarke Schnittstelle zum Ausführen von HTTP-Anfragen, unterstützt Interceptors, automatische Transformation von JSON-Daten und Schutz vor CSRF. Die Bibliothek ist ideal für moderne Webanwendungen, die eine flexible Arbeit mit REST-APIs erfordern.

Wozu braucht man Axios?

Im Gegensatz zum integrierten fetch parst Axios automatisch JSON, behandelt Fehler von HTTP-Statuscodes (z. B. 404 oder 500) als Ausnahmen, unterstützt das Abbrechen von Anfragen und Fortschrittsbalken beim Laden. Für TypeScript-Projekte bietet Axios eine strenge Typisierung von Antworten und Anfragen, was die Entwicklung vereinfacht und die Anzahl der Fehler reduziert. Wenn Sie in TypeScript schreiben und mit APIs arbeiten, ist Axios die Standardwahl.

Installation

npm install axios

Für TypeScript-Projekte sind die Typen bereits im Paket enthalten, eine zusätzliche Installation von @types/axios ist nicht erforderlich.

Hauptfunktionen

• Unterstützung aller HTTP-Methoden: GET, POST, PUT, DELETE, PATCH und andere.
• Automatische Datentransformation: Antworten werden automatisch in JSON geparst, und Anfrageobjekte werden serialisiert.
• Interceptors: Sie können Logik vor dem Senden einer Anfrage oder nach dem Erhalten einer Antwort hinzufügen (z. B. zum Hinzufügen eines Autorisierungstokens).
• Anfragen abbrechen: über CancelToken oder AbortController.
• Timeouts und Fortschritt: Einstellung von Wartezeiten und Verfolgung des Upload-/Download-Fortschritts.
• Strenge Typisierung: Unterstützung von Generics zur Typisierung des Antwortkörpers.

Codebeispiel in TypeScript

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  try {    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);    return response.data;  } catch (error) {    if (axios.isAxiosError(error)) {      console.error('Axios error:', error.message);    } else {      console.error('Unexpected error:', error);    }    throw error;  }}

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

Wann Axios verwenden

Axios ist ideal für jedes TypeScript-Projekt, das eine Interaktion mit HTTP-Servern erfordert: von einfachen SPAs bis hin zu komplexen Serveranwendungen auf Node.js. Besonders nützlich ist es, wenn eine erweiterte Fehlerbehandlung, automatische Datenserialisierung oder die Arbeit mit mehreren APIs benötigt wird. Wenn Sie React, Vue oder Angular verwenden, lässt sich Axios dank der Unterstützung von Interceptors und dem Abbrechen von Anfragen leicht integrieren.

Die Bibliothek wird aktiv unterstützt, hat eine riesige Community und wird in tausenden Projekten eingesetzt. Axios ist eine ausgereifte und stabile Lösung, die keine zusätzlichen Abhängigkeiten erfordert.