How to implement request and response interceptors in axios? Please give practical examples

Axios Interceptors Overview

Axios interceptors allow you to process data uniformly before sending requests or after receiving responses. They are an important mechanism for implementing global configuration, error handling, permission verification, and other functions.

Request Interceptors

Basic Usage

javascript
// Add request interceptor
axios.interceptors.request.use(
  function (config) {
    // Do something before sending the request
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

Practical Application Scenarios

1. Add Authentication Token Uniformly

javascript
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

2. Add Timestamp to Prevent Caching

javascript
axios.interceptors.request.use(
  config => {
    if (config.method === 'get') {
      config.params = {
        ...config.params,
        _t: Date.now()
      };
    }
    return config;
  }
);

3. Show Loading State

javascript
let requestCount = 0;

axios.interceptors.request.use(
  config => {
    requestCount++;
    if (requestCount === 1) {
      // Show global loading
      showLoading();
    }
    return config;
  }
);

Response Interceptors

Basic Usage

javascript
// Add response interceptor
axios.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response;
  },
  function (error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Practical Application Scenarios

1. Unified Error Handling

javascript
axios.interceptors.response.use(
  response => response,
  error => {
    const { response } = error;
    
    if (response) {
      switch (response.status) {
        case 401:
          // Unauthorized, clear token and redirect to login
          localStorage.removeItem('token');
          window.location.href = '/login';
          break;
        case 403:
          message.error('No permission to access this resource');
          break;
        case 404:
          message.error('Requested resource not found');
          break;
        case 500:
          message.error('Server internal error');
          break;
        default:
          message.error(response.data.message || 'Request failed');
      }
    } else {
      message.error('Network error, please check your connection');
    }
    
    return Promise.reject(error);
  }
);

2. Response Data Formatting

javascript
axios.interceptors.response.use(
  response => {
    // Assume backend returns unified format: { code: 0, data: {}, message: '' }
    const res = response.data;
    
    if (res.code !== 0) {
      message.error(res.message);
      return Promise.reject(new Error(res.message));
    }
    
    return res.data; // Return data directly, simplify calls in components
  }
);

3. Hide Loading State

javascript
axios.interceptors.response.use(
  response => {
    requestCount--;
    if (requestCount === 0) {
      hideLoading();
    }
    return response;
  },
  error => {
    requestCount--;
    if (requestCount === 0) {
      hideLoading();
    }
    return Promise.reject(error);
  }
);

Removing Interceptors

javascript
const myInterceptor = axios.interceptors.request.use(() => {});
axios.interceptors.request.eject(myInterceptor);

Adding Interceptors to Instances

javascript
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

instance.interceptors.request.use(config => {
  // Only effective for current instance
  return config;
});

Execution Order of Multiple Interceptors

javascript
axios.interceptors.request.use(config => {
  console.log('Request Interceptor 1');
  return config;
});

axios.interceptors.request.use(config => {
  console.log('Request Interceptor 2');
  return config;
});

// Execution order: Request Interceptor 2 → Request Interceptor 1 → Send Request
// Response interceptor execution order is opposite to addition order

Best Practices

1. Complete error handling: Handle error cases in both request and response interceptors
2. Remember to return config/response: Otherwise requests won't continue
3. Use instance isolation: Different services use different instances to avoid mutual influence
4. Avoid side effects: Don't modify original parameter objects in interceptors
5. Add request identifiers: Facilitate debugging and tracking