How to handle errors in axios? Please explain error types and handling strategies in detail

Axios Error Types

Axios requests may produce errors mainly divided into the following categories:

1. Request Configuration Errors

• URL format errors
• Request method errors
• Configuration parameter errors

2. Network Errors

• No network connection
• Request timeout
• DNS resolution failure
• CORS cross-origin errors

3. HTTP Error Status Codes

• 4xx Client errors (400, 401, 403, 404, etc.)
• 5xx Server errors (500, 502, 503, etc.)

4. Request Cancellation Errors

• Active request cancellation
• Cancellation on component unmount

Error Object Structure

When a request fails, Axios returns an error object containing the following properties:

javascript
try {
  await axios.get('/api/data');
} catch (error) {
  console.log(error.message);      // Error message
  console.log(error.response);     // Server response (if any)
  console.log(error.request);      // Request object
  console.log(error.config);       // Request configuration
  console.log(error.code);         // Error code
}

Error Handling Strategies

1. Basic Error Handling

javascript
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Server returned error status code
      console.log('Status:', error.response.status);
      console.log('Data:', error.response.data);
    } else if (error.request) {
      // Request sent but no response received
      console.log('No response received');
    } else {
      // Request configuration error
      console.log('Error:', error.message);
    }
  });

2. Using async/await for Error Handling

javascript
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    return response.data;
  } catch (error) {
    handleAxiosError(error);
  }
}

function handleAxiosError(error) {
  if (error.response) {
    // Server response error
    const { status, data } = error.response;
    
    switch (status) {
      case 400:
        throw new Error(`Request parameter error: ${data.message}`);
      case 401:
        // Clear login status and redirect
        logout();
        throw new Error('Login expired, please login again');
      case 403:
        throw new Error('No permission to perform this operation');
      case 404:
        throw new Error('Requested resource not found');
      case 422:
        throw new Error(`Data validation failed: ${data.message}`);
      case 500:
        throw new Error('Server internal error, please try again later');
      case 502:
        throw new Error('Gateway error');
      case 503:
        throw new Error('Service temporarily unavailable');
      default:
        throw new Error(data.message || 'Request failed');
    }
  } else if (error.request) {
    // Network error
    if (error.code === 'ECONNABORTED') {
      throw new Error('Request timeout, please check network connection');
    }
    if (error.code === 'ERR_NETWORK') {
      throw new Error('Network error, please check network connection');
    }
    throw new Error('Cannot connect to server');
  } else {
    // Other errors
    throw new Error(error.message);
  }
}

3. Global Error Handling (via Interceptors)

javascript
// Create axios instance
const instance = axios.create({
  timeout: 10000
});

// Response interceptor for unified error handling
instance.interceptors.response.use(
  response => response,
  error => {
    // Unified error handling
    const errorMessage = getErrorMessage(error);
    
    // Show error message
    message.error(errorMessage);
    
    // Log error
    logError(error);
    
    return Promise.reject(error);
  }
);

function getErrorMessage(error) {
  if (error.response) {
    const { status, data } = error.response;
    const messageMap = {
      400: 'Request parameter error',
      401: 'Login expired',
      403: 'No permission',
      404: 'Resource not found',
      500: 'Server error',
      502: 'Gateway error',
      503: 'Service unavailable'
    };
    return data.message || messageMap[status] || 'Request failed';
  }
  
  if (error.request) {
    return 'Network connection failed, please check network';
  }
  
  return error.message || 'Unknown error';
}

4. Timeout Error Handling

javascript
const instance = axios.create({
  timeout: 5000, // 5 second timeout
  timeoutErrorMessage: 'Request timeout, please try again later'
});

// Or custom timeout handling
instance.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
      // Special handling for timeout error
      return Promise.reject(new Error('Request response time too long, please try again later'));
    }
    return Promise.reject(error);
  }
);

5. Retry Mechanism

javascript
axios.interceptors.response.use(null, async (error) => {
  const { config } = error;
  
  // Set retry count
  if (!config || !config.retry) {
    return Promise.reject(error);
  }
  
  config.retryCount = config.retryCount || 0;
  
  if (config.retryCount >= config.retry) {
    return Promise.reject(error);
  }
  
  config.retryCount += 1;
  
  // Delay retry
  const delayRetry = new Promise(resolve => {
    setTimeout(resolve, config.retryDelay || 1000);
  });
  
  await delayRetry;
  return axios(config);
});

// Usage
axios.get('/api/data', {
  retry: 3,
  retryDelay: 2000
});

6. Request Cancellation Error Handling

javascript
const controller = new AbortController();

try {
  const response = await axios.get('/api/data', {
    signal: controller.signal
  });
} catch (error) {
  if (axios.isCancel(error)) {
    console.log('Request cancelled:', error.message);
  } else {
    // Handle other errors
    console.error('Request failed:', error);
  }
}

// Cancel request
controller.abort('User cancelled operation');

Best Practices

1. Layered handling: Global interceptors + business layer handling
2. User-friendly: Error messages should be clear and understandable
3. Error classification: Distinguish between recoverable and non-recoverable errors
4. Logging: Record errors for troubleshooting
5. Fallback strategy: Provide cached data or default data when network error occurs

Error Handling Flow Chart

shell
Request failed
    ↓
Check error.response
    ↓
Exists → HTTP error → Handle according to status code
    ↓
Not exists → Check error.request
    ↓
Exists → Network error → Prompt user to check network
    ↓
Not exists → Configuration error → Check code