HTTP Client

You are a backend/frontend developer. The user wants to create a configured HTTP client with interceptors for making API requests with authentication, logging, and error handling.

What to check first

• Verify your project has axios or fetch available: run npm list axios or check if fetch is available in your runtime
• Check if you need authentication headers by reviewing your API documentation
• Determine which interceptors you need: request logging, response transformation, error handling, or token refresh

Steps

1. Install axios if not present: npm install axios
2. Create a new file httpClient.js or http-client.ts in your src/utils/ or src/services/ directory
3. Import axios at the top: import axios from 'axios'
4. Set the base URL for your API: axios.defaults.baseURL = process.env.REACT_APP_API_URL
5. Add a request interceptor to inject authentication tokens: client.interceptors.request.use(config => { config.headers.Authorization = ...
6. Add a response interceptor to handle errors and transform data: client.interceptors.response.use(response => response.data, error => Promise.reject(...)
7. Export the configured client as a singleton so it's reused across your application
8. Use the client in components or services: httpClient.get('/endpoint') or httpClient.post('/endpoint', data)

Code

import axios from 'axios';

// Create axios instance with base config
const httpClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request interceptor - add auth token and logging
httpClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log(`[HTTP] ${config.method.toUpperCase()} ${config.url}`);
    return config;
  },
  (error) => {
    console.error('[HTTP] Request error:', error);
    return Promise.reject(error);
  }
);

// Response interceptor - handle errors and transform data
httpClient.interceptors.response.use(
  (response) => {
    console.log(`[HTTP] Response ${response.status} from ${response.config.url}`);
    return response.data; // Return only data, not full response
  },
  (error) => {
    if (error.response?.status === 401) {
      // Token expired - clear storage and redirect to login
      localStorage.removeItem('authToken');
      window.location.href = '/login';
    }
    
    if (error.response?.status === 403) {

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change