Axios

Axios - Quick Reference

When to Use This Skill

• HTTP requests in JavaScript/TypeScript applications
• Configuring interceptors for auth/error handling
• Creating Axios instances for specific APIs
• Request/response transformation
• File uploads and downloads

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: axios for comprehensive documentation.

Setup Base

npm install axios

Pattern Essenziali

GET Request

import axios from 'axios';

const response = await axios.get('/api/users');
const users = response.data;

// With params
const response = await axios.get('/api/users', {
  params: { page: 1, limit: 10 }
});

POST Request

const response = await axios.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
});

Axios Instance

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Use instance
const users = await api.get('/users');

Interceptors

// Request interceptor (add auth token)
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor (handle errors)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Handle unauthorized
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

TypeScript Types

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

const response = await api.get<User[]>('/users');
const users: User[] = response.data;

Error Handling

try {
  const response = await api.get('/users');
} catch (error) {
  if (axios.isAxiosError(error)) {
    console.error('API Error:', error.response?.data);
    console.error('Status:', error.response?.status);
  }
}

When NOT to Use This Skill

• Native Fetch API patterns (use http-clients skill)
• ky or ofetch configuration (use http-clients skill)
• GraphQL client setup (use graphql-codegen skill)
• tRPC client configuration (use trpc skill)
• WebSocket connections

Anti-Patterns

Quick Troubleshooting