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: '[email protected]'
});

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

Anti-Pattern	Why It's Bad	Solution
No timeout configured	Requests hang indefinitely	Set timeout in axios.create()
Hardcoded base URLs	Environment coupling	Use env variables for baseURL
No error interceptor	Inconsistent error handling	Add response error interceptor
Not typing responses	Loses type safety	Use generics: axios.get<User>()
Duplicating auth logic	Maintenance burden	Use request interceptor
Ignoring response status	Silent failures	Check response.status or use validateStatus
No request cancellation	Memory leaks on unmount	Use AbortController
Logging sensitive data	Security risk	Redact tokens/passwords from logs

Quick Troubleshooting

Issue	Possible Cause	Solution
CORS errors	Server not allowing origin	Configure CORS on server, check preflight
401 Unauthorized	Missing or invalid token	Check interceptor, verify token
Network Error	Server unreachable, CORS	Check baseURL, server status, CORS config
Timeout errors	Request taking too long	Increase timeout or optimize endpoint
Request canceled	AbortController triggered	Check component lifecycle, don't cancel needed requests
Type errors	Response shape mismatch	Verify API response matches type definition
Interceptor not firing	Interceptor added after request	Add interceptors during client setup
Memory leaks	Not canceling requests on unmount	Use cleanup in useEffect