Axios的使用

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

---

一、Axios 的核心优势

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

---

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

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

// 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）

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. 响应拦截器（统一错误处理）

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. 基础请求

// 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. 并发请求

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

3. 文件上传

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. 请求取消

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. 重试机制

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. 进度跟踪

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

---

五、与 Vue 的深度集成

1. 在 Vuex/Pinia 中使用

// 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 封装

// 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 };
}

---

六、性能优化技巧

1. 连接池管理
   在 Node.js 端配置 http.Agent：

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

2. 缓存策略
   结合本地存储实现缓存层：

   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;
   };
   

---

七、安全实践

1. CSRF 防护
   自动处理 CSRF Token：

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

2. 速率限制
   使用中间件实现 API 调用限流：

   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 状态