OpenAPI zu Axios
TYPE-SAFE AXIOS API CLIENT GENERATOR

OpenAPI & Swagger zu Axios TypeScript API-Client Generator

Generieren Sie saubere, typsichere Axios-HTTP-Client-Funktionen und Parameter-Interfaces aus OpenAPI 3.0 und Swagger JSON/YAML-Spezifikationen.

100% Client-Side Datenschutz
Null Serverübertragung
Vorlagen:
Client-Architektur
Rückgabetyp
Basis-URL
OpenAPI / Swagger Spezifikation (JSON oder YAML)
/**
 * Swagger Petstore (v1.0.0)
 * Sample store API with pets, inventories, and orders for testing Axios client generation.
 * Generated by ToolsAA OpenAPI to Axios Generator
 */

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

DEFAULT_BASE_URL = 'https://petstore.swagger.io/v2';

apiClient: AxiosInstance = axios.create({
  baseURL: DEFAULT_BASE_URL,
  timeout: 15000,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

// ============================================================================
// Data Models & Interfaces
// ============================================================================

Category {
  id?: number;
  name?: string;
}

Tag {
  id?: number;
  name?: string;
}

Pet {
  id: number;
  name: string;
  category?: Category;
  photoUrls?: string[];
  tags?: Tag[];
  status?: 'available' | 'pending' | 'sold';
}

NewPet {
  name: string;
  category?: Category;
  status?: 'available' | 'pending' | 'sold';
}

Order {
  id?: number;
  petId?: number;
  quantity?: number;
  shipDate?: string;
  status?: 'placed' | 'approved' | 'delivered';
  complete?: boolean;
}

// ============================================================================
// Parameter Types
// ============================================================================

ListPetsQueryParams {
  /** How many items to return at one time (max 100) */
  limit?: number;
  /** Status values that need to be considered for filter */
  status?: 'available' | 'pending' | 'sold';
}

// ============================================================================
// API Operations
// ============================================================================

/**
 * List all pets
 * Returns a paginated list of pets filtered by availability status.
 * @route GET /pets
 * @param params Query parameters
 */
listPets = async (
  params?: ListPetsQueryParams,
  config?: AxiosRequestConfig
): Promise<Pet[]> => {
  const response = await apiClient.get<Pet[]>('/pets', { params, ...config });
  return response.data;
};

/**
 * Create a pet
 * Add a new pet to the store inventory.
 * @route POST /pets
 * @param data Request payload
 */
createPet = async (
  data: NewPet,
  config?: AxiosRequestConfig
): Promise<Pet> => {
  const response = await apiClient.post<Pet>('/pets', data, { ...config });
  return response.data;
};

/**
 * Find pet by ID
 * Returns a single pet matching the ID.
 * @route GET /pets/{petId}
 * @param petId The id of the pet to retrieve
 */
getPetById = async (
  petId: number,
  config?: AxiosRequestConfig
): Promise<Pet> => {
  const response = await apiClient.get<Pet>(`/pets/${encodeURIComponent(String(petId))}`, { ...config });
  return response.data;
};

/**
 * Update pet by ID
 * Updates attributes of an existing pet record.
 * @route PUT /pets/{petId}
 * @param petId Path parameter
 * @param data Request payload
 */
updatePetById = async (
  petId: number,
  data: NewPet,
  config?: AxiosRequestConfig
): Promise<Pet> => {
  const response = await apiClient.put<Pet>(`/pets/${encodeURIComponent(String(petId))}`, data, { ...config });
  return response.data;
};

/**
 * Delete pet by ID
 * Deletes a pet record from database.
 * @route DELETE /pets/{petId}
 * @param petId Path parameter
 */
deletePetById = async (
  petId: number,
  config?: AxiosRequestConfig
): Promise<void> => {
  const response = await apiClient.delete<void>(`/pets/${encodeURIComponent(String(petId))}`, { ...config });
  return response.data;
};

/**
 * Place an order
 * Place an order for purchasing a pet.
 * @route POST /store/orders
 * @param data Request payload
 */
placeOrder = async (
  data: Order,
  config?: AxiosRequestConfig
): Promise<Order> => {
  const response = await apiClient.post<Order>('/store/orders', data, { ...config });
  return response.data;
};

/**
 * Find purchase order by ID
 * @route GET /store/orders/{orderId}
 * @param orderId Path parameter
 */
getOrderById = async (
  orderId: number,
  config?: AxiosRequestConfig
): Promise<Order> => {
  const response = await apiClient.get<Order>(`/store/orders/${encodeURIComponent(String(orderId))}`, { ...config });
  return response.data;
};
Extrahierte Endpunkte
7
Schemas / Typen
5
Generierte Codezeilen
171

Clientseitige Verarbeitung

Blitzschnelles Parsen von OpenAPI 3.0/3.1 und Swagger 2.0 sowie Codegenerierung direkt im Arbeitsspeicher Ihres Browsers.

Keine Server-Uploads

Proprietäre API-Schemas und interne Verträge verlassen niemals Ihr Gerät. Höchste Datensicherheit garantiert.

Produktionsreifes TypeScript

Strikte Typen, Parameter-Schnittstellen und Axios-Konfigurationen, bereit für den sofortigen produktiven Einsatz.

Technische Referenz & Architektur-Leitfaden

OpenAPI & Swagger zu Axios TypeScript API-Client Generator — Referenz-Leitfaden

Generieren Sie saubere, typsichere Axios-HTTP-Client-Funktionen und Parameter-Interfaces aus OpenAPI 3.0 und Swagger JSON/YAML-Spezifikationen.

Wichtige Parameter & Steuerelemente

clientStyle'functional' | 'class'

Bestimmt, ob modulare eigenständige Funktionen oder eine gekapselte Axios-Klasseninstanz generiert werden.

Standard: 'functional'
axiosInstanceSourcestring

Importpfad oder Bezeichner für eine vorkonfigurierte AxiosInstance (z. B. '@/lib/api-client').

Standard: 'axios'
unwrapResponseboolean

Extrahiert automatisch response.data, anstatt den gesamten AxiosResponse<T>-Wrapper zurückzugeben.

Standard: true
enumStyle'union' | 'enum'

Formatiert OpenAPI-String-Enumerationen als TypeScript-Literal-Union-Typen oder native TS-Enums.

Standard: 'union'
includeErrorTypesboolean

Erzeugt typisierte Fehlerschemas für die strukturierte AxiosError<T>-Behandlung in try-catch-Blöcken.

Standard: true

Profi-Tipps & Best Practices

Konfigurieren Sie JWT-Header und

Konfigurieren Sie JWT-Header und automatische Token-Aktualisierungen über Axios-Request/Response-Interceptors, anstatt Header in jedem Aufruf manuell zu setzen.

Übergeben Sie AbortSignal über

Übergeben Sie AbortSignal über AxiosRequestConfig in React useEffect-Hooks, um ausstehende HTTP-Anfragen beim Entladen von Komponenten automatisch abzubrechen.

Wenn Endpunkte Array-Query-Parameter

Wenn Endpunkte Array-Query-Parameter erwarten, konfigurieren Sie paramsSerializer mit 'brackets' oder 'repeat', passend zum Backend-OpenAPI-Vertrag.

Nutzen Sie axios.isAxiosError<T>

Nutzen Sie axios.isAxiosError<T>(err) in Kombination mit generierten Fehlertypen, um ohne unsichere Type-Casts auf validierte Fehlermeldungen zuzugreifen.

Häufige Fallstricke & Fehlerbehebung

Endpunkte geben AxiosResponse<unknown> oder any zurück

Stellen Sie sicher, dass in der OpenAPI-Spezifikation unter 'responses.200.content.application/json.schema' ein valides Schema hinterlegt ist.

Fehlende operationId führt zu Namenskonflikten bei Funktionen

Vergeben Sie eindeutige operationId-Werte in der OpenAPI-Datei oder nutzen Sie die automatische Namenszusammensetzung aus HTTP-Methode und Pfad.

Multipart/form-data Datei-Uploads schlagen mit falschem Content-Type fehl

Übergeben Sie native FormData-Objekte und verzichten Sie auf das manuelle Setzen des Content-Type-Headers, damit Axios die Multipart-Grenze berechnet.

Häufig gestellte Fragen (FAQ)

Welche OpenAPI- und Swagger-Versionen werden unterstützt?▼

Der Generator unterstützt OpenAPI 3.1.x, OpenAPI 3.0.x sowie Swagger 2.0 sowohl im JSON- als auch im YAML-Format vollständig.

Wie werden Abfrageparameter (Query-Parameter) typisiert?▼

Query-Parameter werden in typisierte TypeScript-Interfaces umgewandelt und typsicher an die 'params'-Eigenschaft der Axios-Anfrage übergeben.

Kann eine benutzerdefinierte Axios-Instanz eingebunden werden?▼

Ja. Über 'axiosInstanceSource' lässt sich der Importpfad festlegen (z. B. '@/lib/axios'), sodass alle Methoden gemeinsame Interceptors und Timeouts nutzen.

Werden meine OpenAPI- oder Swagger-Spezifikationen auf einen Server hochgeladen?▼

Nein. Sämtliche Analyse-, Schemaauflösungs- und TypeScript-Generierungsschritte laufen zu 100 % lokal im Browser-Arbeitsspeicher ab.

Wie werden 4xx- und 5xx-Fehlerantworten in TypeScript abgebildet?▼

Der Generator exportiert Interfaces für definierte HTTP-Statusfehler, die mit axios.isAxiosError<ApiErrorResponse>(err) im catch-Block abgefangen werden können.

Verwandte Werkzeuge & Dienstprogramme

Alle Werkzeuge →