Bits of .NET

📡 Axios = HTTP Client

Fetch is basic. Axios is feature-rich. Interceptors, error handling, automatic JSON.

📝 Axios Setup

# Install
npm install axios

# Basic GET
import axios from 'axios';

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

# POST
axios.post('https://api.example.com/data', {
    name: 'Alice',
    email: 'alice@example.com'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

# Async/Await
try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
} catch (error) {
    console.error(error);
}

# Global defaults
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

🎯 Axios Features

// Interceptors
axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${token}`;
    return config;
});

axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response?.status === 401) {
            // Handle unauthorized
        }
        return Promise.reject(error);
    }
);

// Cancel requests
const controller = new AbortController();
axios.get('/api/data', { signal: controller.signal });
controller.abort();

// Concurrent requests
const [users, posts] = await Promise.all([
    axios.get('/api/users'),
    axios.get('/api/posts')
]);

// Create instance
const api = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});

// Progress tracking
axios.post('/api/upload', formData, {
    onUploadProgress: progressEvent => {
        const percent = (progressEvent.loaded / progressEvent.total) * 100;
        console.log(`Upload: ${percent}%`);
    }
});

// Automatic JSON transformation
axios.post('/api/data', { name: 'Alice' }); // No need to stringify

// Axios Tips
- Use interceptors for auth and logging
- Use instances for different APIs
- Use async/await for readability
- Cancel requests when needed
- Handle errors globally

💡 Axios Tips

• Use interceptors for auth and logging
• Use instances for different APIs
• Use async/await for readability
• Cancel requests when needed
• Handle errors globally