What advanced features does axios have? Such as file upload/download, progress monitoring, CSRF protection, etc. - 面试题

Axios Advanced Features Overview

Axios not only supports basic HTTP requests but also provides many advanced features, including file upload/download, progress monitoring, CSRF protection, request transformation, etc.

1. File Upload

Basic File Upload

javascript
// HTML
// <input type="file" id="fileInput" />

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    return response.data;
  } catch (error) {
    console.error('Upload failed:', error);
    throw error;
  }
};

// Usage
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  uploadFile(file);
});

Multiple File Upload

javascript
const uploadMultipleFiles = async (files) => {
  const formData = new FormData();
  
  files.forEach((file, index) => {
    formData.append(`file${index}`, file);
  });
  
  // Or use same field name
  // files.forEach(file => {
  //   formData.append('files', file);
  // });
  
  const response = await axios.post('/api/upload-multiple', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
  
  return response.data;
};

File Upload with Progress Bar

javascript
const uploadWithProgress = (file, onProgress) => {
  const formData = new FormData();
  formData.append('file', file);
  
  return axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: (progressEvent) => {
      if (progressEvent.lengthComputable) {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        onProgress(percentCompleted);
      }
    }
  });
};

// Usage in React component
function FileUpload() {
  const [progress, setProgress] = useState(0);
  
  const handleUpload = async (file) => {
    try {
      const result = await uploadWithProgress(file, setProgress);
      console.log('Upload successful:', result);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };
  
  return (
    <div>
      <input type="file" onChange={(e) => handleUpload(e.target.files[0])} />
      <progress value={progress} max="100" />
      <span>{progress}%</span>
    </div>
  );
}

2. File Download

Basic File Download

javascript
const downloadFile = async (url, filename) => {
  try {
    const response = await axios.get(url, {
      responseType: 'blob' // Important: set response type to blob
    });
    
    // Create download link
    const blob = new Blob([response.data]);
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('Download failed:', error);
  }
};

// Usage
downloadFile('/api/download/report.pdf', 'report.pdf');

File Download with Progress Bar

javascript
const downloadWithProgress = async (url, filename, onProgress) => {
  const response = await axios.get(url, {
    responseType: 'blob',
    onDownloadProgress: (progressEvent) => {
      if (progressEvent.lengthComputable) {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        onProgress(percentCompleted);
      }
    }
  });
  
  const blob = new Blob([response.data]);
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
};

3. CSRF Protection

Automatic CSRF Token Handling

javascript
const instance = axios.create({
  // Field name to read CSRF token from cookie
  xsrfCookieName: 'XSRF-TOKEN',
  
  // Field name to send CSRF token in request header
  xsrfHeaderName: 'X-XSRF-TOKEN',
  
  // Allow carrying cookies
  withCredentials: true
});

Manual CSRF Token Setting

javascript
// Get CSRF token from meta tag
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

const instance = axios.create({
  headers: {
    'X-CSRF-TOKEN': csrfToken
  }
});

// Or set dynamically through interceptor
instance.interceptors.request.use(config => {
  const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  if (token) {
    config.headers['X-CSRF-TOKEN'] = token;
  }
  return config;
});

4. Request and Response Transformation

Request Data Transformation

javascript
const instance = axios.create({
  // Modify request data before sending to server
  transformRequest: [
    function (data, headers) {
      // Transform data
      if (data instanceof FormData) {
        return data;
      }
      
      // Add timestamp to prevent caching
      if (data && typeof data === 'object') {
        data._timestamp = Date.now();
      }
      
      return JSON.stringify(data);
    }
  ]
});

Response Data Transformation

javascript
const instance = axios.create({
  // Modify response data before passing to then/catch
  transformResponse: [
    function (data) {
      // Parse JSON
      const parsed = JSON.parse(data);
      
      // Unified response format handling
      if (parsed.code !== 0) {
        throw new Error(parsed.message);
      }
      
      return parsed.data;
    }
  ]
});

5. Parameter Serialization

Custom Parameter Serialization

javascript
import qs from 'qs';

const instance = axios.create({
  // Custom params serialization
  paramsSerializer: {
    encode?: (param: string): string => encodeURIComponent(param), // Custom encoding function
    serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions): string => {
      // Use qs library for serialization
      return qs.stringify(params, { arrayFormat: 'brackets' });
    },
    indexes: false // Array parameters don't use indexes
  }
});

// Usage
instance.get('/api/search', {
  params: {
    q: 'keyword',
    tags: ['javascript', 'axios']
  }
});
// Result: /api/search?q=keyword&tags[]=javascript&tags[]=axios

6. Proxy Configuration

javascript
// Node.js environment
const instance = axios.create({
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
});

// Or use environment variables
const instance = axios.create({
  proxy: false // Disable proxy
});

7. Adapters

Custom Adapter

javascript
const instance = axios.create({
  adapter: (config) => {
    return new Promise((resolve, reject) => {
      // Custom request implementation
      const xhr = new XMLHttpRequest();
      xhr.open(config.method.toUpperCase(), config.url);
      
      xhr.onload = () => {
        resolve({
          data: xhr.response,
          status: xhr.status,
          statusText: xhr.statusText,
          headers: {},
          config,
          request: xhr
        });
      };
      
      xhr.onerror = () => reject(new Error('Request failed'));
      xhr.send(config.data);
    });
  }
});

8. Status Code Validation

javascript
const instance = axios.create({
  // Custom valid status codes
  validateStatus: (status) => {
    return status >= 200 && status < 300; // Default value
    // Or accept all status codes
    // return true;
    // Or only accept specific status codes
    // return [200, 201, 204].includes(status);
  }
});

9. Maximum Content Length and Redirects

javascript
const instance = axios.create({
  // Maximum response content length (bytes)
  maxContentLength: 2000,
  
  // Maximum request content length (bytes)
  maxBodyLength: 2000,
  
  // Maximum redirect count
  maxRedirects: 5,
  
  // Follow redirects in Node.js
  // This config has no effect in browsers (browsers handle redirects automatically)
});

10. Complete Advanced Configuration Example

javascript
import axios from 'axios';
import qs from 'qs';

const advancedApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 30000,
  
  // Request headers
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  
  // Carry cookies
  withCredentials: true,
  
  // CSRF protection
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  
  // Response type
  responseType: 'json',
  
  // Parameter serialization
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'repeat' });
  },
  
  // Request transformation
  transformRequest: [
    (data, headers) => {
      // Add authentication info
      const token = localStorage.getItem('token');
      if (token) {
        headers.Authorization = `Bearer ${token}`;
      }
      
      // If not FormData, convert to JSON
      if (data && !(data instanceof FormData)) {
        return JSON.stringify(data);
      }
      
      return data;
    }
  ],
  
  // Response transformation
  transformResponse: [
    (data) => {
      // Unified error handling
      if (data && data.code !== 0) {
        throw new Error(data.message);
      }
      return data?.data || data;
    }
  ],
  
  // Status code validation
  validateStatus: (status) => {
    return status >= 200 && status < 500;
  },
  
  // Maximum content length
  maxContentLength: 50 * 1024 * 1024, // 50MB
  
  // Maximum redirect count
  maxRedirects: 5
});

// Add progress monitoring interceptor
advancedApi.interceptors.request.use(config => {
  if (config.onUploadProgress || config.onDownloadProgress) {
    console.log('Request includes progress monitoring');
  }
  return config;
});

export default advancedApi;

Best Practices

File Upload: Always use FormData, set correct Content-Type
File Download: Set responseType to 'blob' or 'arraybuffer'
CSRF Protection: Correctly configure xsrfCookieName and xsrfHeaderName
Progress Monitoring: Use in scenarios requiring user experience
Data Transformation: Unified handling of request and response data formats
Error Handling: Unified handling of business errors in transformResponse