axios 实例如何创建和配置？请说明 axios.create() 的使用方法 - 面试题

使用 axios.create() 方法可以创建具有自定义配置的 axios 实例，这在需要多个不同配置的 HTTP 客户端时非常有用。

基本用法

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

// 使用实例发送请求
instance.get('/users')
  .then(response => {
    console.log(response.data);
  });

配置选项详解

1. 基础配置

javascript
const instance = axios.create({
  // 基础 URL，会自动添加到请求 URL 前面
  baseURL: 'https://api.example.com/v1',
  
  // 请求超时时间（毫秒）
  timeout: 10000,
  
  // 自定义请求头
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  
  // 请求方法
  method: 'get',
  
  // URL 参数
  params: {
    key: 'value'
  },
  
  // 请求体数据（仅适用于 PUT、POST、DELETE 和 PATCH）
  data: {
    firstName: 'John'
  }
});

2. 高级配置

javascript
const instance = axios.create({
  // 允许携带 cookie
  withCredentials: true,
  
  // 响应类型
  responseType: 'json', // 'arraybuffer', 'document', 'json', 'text', 'stream', 'blob'
  
  // 响应编码
  responseEncoding: 'utf8',
  
  //  xsrf token 名称
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  
  // 上传/下载进度监控
  onUploadProgress: function (progressEvent) {
    // 上传进度
  },
  onDownloadProgress: function (progressEvent) {
    // 下载进度
  },
  
  // 最大重定向次数
  maxRedirects: 5,
  
  // 最大请求体长度
  maxContentLength: 2000,
  
  // 最大响应体长度
  maxBodyLength: 2000,
  
  // 代理配置
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
});

多实例配置场景

场景 1：多个后端服务

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

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

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

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

场景 2：不同环境配置

javascript
// 开发环境
const devInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
});

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

// 根据环境导出
const api = process.env.NODE_ENV === 'production' ? prodInstance : devInstance;
export default api;

场景 3：带认证的 API 和普通 API

javascript
// 需要认证的 API
const authApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// 添加认证拦截器
authApi.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 公开 API（无需认证）
const publicApi = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 使用
publicApi.get('/public/data');     // 无需认证
authApi.get('/private/profile');   // 需要认证

实例方法

创建实例后，可以使用以下方法：

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

// 请求方法
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)

// 获取 URI（不发送请求）
instance.getUri(config)

默认配置修改

修改实例默认配置

javascript
const instance = axios.create();

// 修改默认配置
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;

请求时覆盖配置

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

// 单次请求覆盖配置
instance.get('/long-operation', {
  timeout: 30000  // 覆盖默认的 5000ms
});

配置优先级

配置会按以下优先级合并（后面的覆盖前面的）：

库默认值
axios.create() 中的配置
实例的 defaults 属性
请求时的配置参数

javascript
// 库默认值
axios.defaults.timeout = 0;

// 实例创建配置
const instance = axios.create({
  timeout: 5000  // 覆盖库默认值
});

// 实例 defaults 配置
instance.defaults.timeout = 10000;  // 覆盖创建时的配置

// 请求配置
instance.get('/data', {
  timeout: 20000  // 最终使用这个值
});

完整封装示例

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

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

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

// 响应拦截器
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 default api;

// 特定服务 API
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}`)
};

使用示例

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

// 使用默认实例
const fetchData = async () => {
  const data = await api.get('/data');
  return data;
};

// 使用特定服务 API
const getUserProfile = async () => {
  const profile = await userApi.getProfile();
  return profile;
};

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