Axios的使用 - 技术栈

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计。在企业级应用中，它凭借以下核心优势成为首选方案：

一、Axios 的核心优势

特性	说明
Promise 支持	天然支持异步编程，避免回调地狱
拦截器机制	可全局拦截请求和响应，实现统一处理（如鉴权、日志）
自动 JSON 转换	自动解析 JSON 响应数据
CSRF/XSRF 防护	内置对跨站请求伪造的防护支持
取消请求	支持主动取消进行中的请求
多环境适配	浏览器端基于 XHR，Node.js 端基于 http 模块
TypeScript 支持	提供完整的类型定义

二、企业级应用配置（最佳实践）

1. 创建全局实例（推荐）

javascript 复制代码

// src/utils/axios.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 环境变量配置
  timeout: 10000, // 超时时间
  headers: { 'Content-Type': 'application/json' }
});

export default service;

2. 请求拦截器（统一添加 Token）

javascript 复制代码

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

3. 响应拦截器（统一错误处理）

javascript 复制代码

service.interceptors.response.use(
  response => {
    // 处理业务成功状态
    if (response.data.code === 200) {
      return response.data;
    } else {
      return handleBusinessError(response.data);
    }
  },
  error => {
    // 处理 HTTP 错误状态
    if (error.response.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

三、核心使用模式

1. 基础请求

javascript 复制代码

// src/api/user.js
import service from '@/utils/axios';

export const getUsers = async (params) => {
  try {
    const response = await service.get('/users', { params });
    return response.data;
  } catch (error) {
    handleError(error);
  }
};

export const createUser = async (userData) => {
  try {
    await service.post('/users', userData);
  } catch (error) {
    handleError(error);
  }
};

2. 并发请求

javascript 复制代码

const fetchAllData = async () => {
  try {
    const [users, products] = await Promise.all([
      service.get('/users'),
      service.get('/products')
    ]);
    // 处理数据...
  } catch (error) {
    handleError(error);
  }
};

3. 文件上传

javascript 复制代码

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    await service.post('/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
  } catch (error) {
    handleError(error);
  }
};

四、高级企业级功能

1. 请求取消

javascript 复制代码

const CancelToken = axios.CancelToken;
let cancel;

const searchUsers = async (keyword) => {
  // 取消前一个请求
  if (cancel) cancel();

  try {
    const response = await axios.get('/search', {
      params: { q: keyword },
      cancelToken: new CancelToken(c => cancel = c)
    });
    // 处理结果...
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request canceled');
    } else {
      handleError(error);
    }
  }
};

2. 重试机制

javascript 复制代码

service.interceptors.response.use(null, async error => {
  const config = error.config;
  
  if (error.response.status === 503 && !config._retry) {
    config._retry = true;
    await new Promise(resolve => setTimeout(resolve, 2000));
    return service(config);
  }
  
  return Promise.reject(error);
});

3. 进度跟踪

javascript 复制代码

axios.post('/upload', data, {
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    updateProgress(percent);
  }
});

五、与 Vue 的深度集成

1. 在 Vuex/Pinia 中使用

javascript 复制代码

// stores/userStore.js
import axios from '@/utils/axios';

export const useUserStore = defineStore('user', {
  actions: {
    async fetchUsers() {
      try {
        this.loading = true;
        this.users = await axios.get('/users');
      } finally {
        this.loading = false;
      }
    }
  }
});

2. 组合式 API 封装

javascript 复制代码

// composables/useApi.js
import axios from '@/utils/axios';

export function useApi() {
  const loading = ref(false);
  
  const fetchData = async (url) => {
    loading.value = true;
    try {
      return await axios.get(url);
    } finally {
      loading.value = false;
    }
  };

  return { loading, fetchData };
}

六、性能优化技巧

连接池管理

在 Node.js 端配置 http.Agent：

javascript 复制代码

axios.create({
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true })
});

缓存策略

结合本地存储实现缓存层：

javascript 复制代码

const getWithCache = async (url) => {
  const cacheKey = `cache_${url}`;
  const cached = localStorage.getItem(cacheKey);
  if (cached) return JSON.parse(cached);

  const response = await axios.get(url);
  localStorage.setItem(cacheKey, JSON.stringify(response.data));
  return response.data;
};

七、安全实践

CSRF 防护

自动处理 CSRF Token：

javascript 复制代码

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

速率限制

使用中间件实现 API 调用限流：

javascript 复制代码

let lastCall = 0;
service.interceptors.request.use(config => {
  const now = Date.now();
  if (now - lastCall < 1000) {
    return Promise.reject(new Error('请求过于频繁'));
  }
  lastCall = now;
  return config;
});

八、企业级项目目录建议

复制代码

src/
├── api/
│   ├── auth.js        # 认证相关 API
│   ├── user.js        # 用户管理 API
│   └── product.js     # 商品管理 API
├── utils/
│   └── axios.js       # Axios 全局配置
└── stores/
    └── apiStore.js    # 集中管理 API 状态