d-subrahmanyam/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 |