How to create and configure axios instances? Please explain the usage of axios.create() - 面试题

Using the axios.create() method, you can create axios instances with custom configurations, which is very useful when multiple HTTP clients with different configurations are needed.

Basic Usage

javascript
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// Use instance to send requests
instance.get('/users')
  .then(response => {
    console.log(response.data);
  });

Configuration Options Explained

1. Basic Configuration

javascript
const instance = axios.create({
  // Base URL, automatically prepended to request URL
  baseURL: 'https://api.example.com/v1',
  
  // Request timeout (milliseconds)
  timeout: 10000,
  
  // Custom request headers
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  
  // Request method
  method: 'get',
  
  // URL parameters
  params: {
    key: 'value'
  },
  
  // Request body data (only applicable to PUT, POST, DELETE, and PATCH)
  data: {
    firstName: 'John'
  }
});

2. Advanced Configuration

javascript
const instance = axios.create({
  // Allow carrying cookies
  withCredentials: true,
  
  // Response type
  responseType: 'json', // 'arraybuffer', 'document', 'json', 'text', 'stream', 'blob'
  
  // Response encoding
  responseEncoding: 'utf8',
  
  // xsrf token name
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  
  // Upload/download progress monitoring
  onUploadProgress: function (progressEvent) {
    // Upload progress
  },
  onDownloadProgress: function (progressEvent) {
    // Download progress
  },
  
  // Maximum redirect count
  maxRedirects: 5,
  
  // Maximum request body length
  maxContentLength: 2000,
  
  // Maximum response body length
  maxBodyLength: 2000,
  
  // Proxy configuration
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
});

Multi-Instance Configuration Scenarios

Scenario 1: Multiple Backend Services

javascript
// User service
const userService = axios.create({
  baseURL: 'https://api.user-service.com',
  timeout: 5000
});

// Order service
const orderService = axios.create({
  baseURL: 'https://api.order-service.com',
  timeout: 10000
});

// Payment service
const paymentService = axios.create({
  baseURL: 'https://api.payment-service.com',
  timeout: 15000,
  headers: {
    'X-Payment-Key': 'secret-key'
  }
});

// Usage
userService.get('/users/1');
orderService.get('/orders/123');
paymentService.post('/payments', { amount: 100 });

Scenario 2: Different Environment Configurations

javascript
// Development environment
const devInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
});

// Production environment
const prodInstance = axios.create({
  baseURL: 'https://api.production.com',
  timeout: 10000,
  headers: {
    'X-Environment': 'production'
  }
});

// Export based on environment
const api = process.env.NODE_ENV === 'production' ? prodInstance : devInstance;
export default api;

Scenario 3: Authenticated and Public APIs

javascript
// API requiring authentication
const authApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// Add authentication interceptor
authApi.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Public API (no authentication required)
const publicApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// Usage
publicApi.get('/public/data');     // No authentication required
authApi.get('/private/profile');   // Authentication required

Instance Methods

After creating an instance, you can use the following methods:

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

// Request methods
instance.request(config)
instance.get(url, config)
instance.delete(url, config)
instance.head(url, config)
instance.options(url, config)
instance.post(url, data, config)
instance.put(url, data, config)
instance.patch(url, data, config)

// Get URI (without sending request)
instance.getUri(config)

Default Configuration Modification

Modify Instance Default Configuration

javascript
const instance = axios.create();

// Modify default configuration
instance.defaults.baseURL = 'https://api.example.com';
instance.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.defaults.timeout = 10000;

Override Configuration per Request

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

// Override configuration for single request
instance.get('/long-operation', {
  timeout: 30000  // Override default 5000ms
});

Configuration Priority

Configurations are merged in the following priority (later overrides earlier):

Library defaults
Configuration in axios.create()
Instance's defaults property
Request configuration parameters

javascript
// Library defaults
axios.defaults.timeout = 0;

// Instance creation configuration
const instance = axios.create({
  timeout: 5000  // Override library defaults
});

// Instance defaults configuration
instance.defaults.timeout = 10000;  // Override creation configuration

// Request configuration
instance.get('/data', {
  timeout: 20000  // Final value used
});

Complete Encapsulation Example

javascript
// api.js
import axios from 'axios';

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

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

// Response interceptor
api.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// Export instance and methods
export default api;

// Specific service APIs
export const userApi = {
  getProfile: () => api.get('/users/profile'),
  updateProfile: (data) => api.put('/users/profile', data),
  changePassword: (data) => api.post('/users/change-password', data)
};

export const orderApi = {
  getOrders: (params) => api.get('/orders', { params }),
  createOrder: (data) => api.post('/orders', data),
  cancelOrder: (id) => api.delete(`/orders/${id}`)
};

Usage Example

javascript
import api, { userApi, orderApi } from './api';

// Use default instance
const fetchData = async () => {
  const data = await api.get('/data');
  return data;
};

// Use specific service API
const getUserProfile = async () => {
  const profile = await userApi.getProfile();
  return profile;
};

const createNewOrder = async (orderData) => {
  const order = await orderApi.createOrder(orderData);
  return order;
};