当前位置：首页 > news >正文

10.vue.js中封装axioa（3）

news 来源：原创 2025/6/6 8:53:47

Vue 项目中如何封装和使用 Axios 的完整结构与示例，

项目结构目录（含 Axios 封装）

your-vue-project/
├── src/
│ ├── api/ # 所有 API 接口文件
│ │ └── user.js # 示例：用户相关接口
│ ├── utils/ # 工具函数
│ │ └── request.js # Axios 封装文件
│ ├── views/ # 页面组件
│ │ └── UserView.vue # 示例：使用接口的页面
│ ├── App.vue
│ └── main.js
├── package.json
└── README.md

📜 request.js（Axios 封装文件）src/utils/request.js

import axios from ‘axios’;

// 创建 Axios 实例
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL || ‘’, // 你的后端 API 根路径
timeout: 5000,
headers: {
‘Content-Type’: ‘application/json’,
},
});

// 请求拦截器
service.interceptors.request.use(
config => {
// 这里可以设置 token，例如：
const token = localStorage.getItem(‘token’);
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
},
error => Promise.reject(error)
);

// 响应拦截器
service.interceptors.response.use(
response => response.data, // 只返回 data 部分
error => {
// 可统一处理错误
console.error(‘Request Error:’, error);
return Promise.reject(error);
}
);

export default service;

📜 user.js（接口文件）src/api/user.js

import request from ‘@/utils/request.js’;

// 示例：获取用户列表
export function getUserList() {
return request({
url: ‘/users’,
method: ‘get’
});
}

// 示例：登录
export function login(data) {
return request({
url: ‘/auth/login’,
method: ‘post’,
data
});
}

📜 UserView.vue（使用接口）src/views/UserView.vue