Bits of .NET

🔀 Intercept and Modify Requests

Need to add auth token to every request? Log responses? Interceptors modify requests/responses globally. Clean, DRY.

📝 Axios Interceptors

// Request interceptor
axios.interceptors.request.use(
  config => {
    // Add auth token to every request
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    // Log request
    console.log('Request:', config.method, config.url);
    
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// Response interceptor
axios.interceptors.response.use(
  response => {
    // Log response
    console.log('Response:', response.status, response.config.url);
    return response;
  },
  error => {
    // Handle errors globally
    if (error.response.status === 401) {
      // Redirect to login
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

🎯 Fetch Interceptors

// Wrapper for fetch with interceptors
class ApiClient {
  constructor() {
    this.baseURL = '/api';
  }
  
  async request(url, options = {}) {
    // Request interceptor
    const token = localStorage.getItem('token');
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers
    };
    
    if (token) {
      headers.Authorization = `Bearer ${token}`;
    }
    
    try {
      const response = await fetch(`${this.baseURL}${url}`, {
        ...options,
        headers
      });
      
      // Response interceptor
      if (response.status === 401) {
        window.location.href = '/login';
        return;
      }
      
      if (!response.ok) {
        throw new Error(`HTTP error: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      // Error interceptor
      console.error('API Error:', error);
      throw error;
    }
  }
  
  get(url) { return this.request(url); }
  post(url, data) { return this.request(url, { method: 'POST', body: JSON.stringify(data) }); }
  put(url, data) { return this.request(url, { method: 'PUT', body: JSON.stringify(data) }); }
  delete(url) { return this.request(url, { method: 'DELETE' }); }
}

💡 Use Cases

• Add authentication token to every request
• Logging requests and responses
• Error handling (401 redirect)
• Request/response transformation
• Retry failed requests