Loading...
Loading...
Axios - promise-based HTTP client for browser and Node.js USE WHEN: user mentions "Axios", "HTTP requests", "API calls", "interceptors", "Axios instance", asks about "how to make HTTP calls", "configure Axios", "add auth header", "handle HTTP errors" DO NOT USE FOR: Fetch API - use `http-clients` instead; ky/ofetch - use `http-clients` instead; GraphQL clients - use `graphql-codegen` instead; tRPC - use `trpc` instead
npx skill4agent add claude-dev-suite/claude-dev-suite axiosDeep Knowledge: Usewith technology:mcp__documentation__fetch_docsfor comprehensive documentation.axios
npm install axiosimport 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 }
});const response = await axios.post('/api/users', {
name: 'John',
email: 'john@example.com'
});const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use instance
const users = await api.get('/users');// 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);
}
);interface User {
id: number;
name: string;
email: string;
}
const response = await api.get<User[]>('/users');
const users: User[] = response.data;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);
}
}http-clientshttp-clientsgraphql-codegentrpc| 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: |
| 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 |
| 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 |