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
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