# Axios

> |

- **Type:** Skill
- **Install:** `agentstack add skill-claude-dev-suite-claude-dev-suite-axios`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [claude-dev-suite](https://agentstack.voostack.com/s/claude-dev-suite)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [claude-dev-suite](https://github.com/claude-dev-suite)
- **Source:** https://github.com/claude-dev-suite/claude-dev-suite/tree/main/skills/api-integration/axios

## Install

```sh
agentstack add skill-claude-dev-suite-claude-dev-suite-axios
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```bash
npm install axios
```

## Pattern Essenziali

### GET Request
```typescript
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
```typescript
const response = await axios.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
});
```

### Axios Instance
```typescript
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
```typescript
// 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
```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

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

### Error Handling
```typescript
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()` |
| 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 |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [claude-dev-suite](https://github.com/claude-dev-suite)
- **Source:** [claude-dev-suite/claude-dev-suite](https://github.com/claude-dev-suite/claude-dev-suite)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-claude-dev-suite-claude-dev-suite-axios
- Seller: https://agentstack.voostack.com/s/claude-dev-suite
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.