若依前后端分离：axios 封装与使用，一篇吃透
·
若依（RuoYi）前后端分离项目中 axios 的使用方式，这是前端与后端交互的核心，若依框架已经对 axios 做了封装，我会详细讲解其封装逻辑、核心配置和实际使用场景。
若依最新前后端分离源码下载：
源码：https://gitee.com/ruoyieleadmin/ruoyi-ele-admin
一、若依框架中 axios 的核心封装
若依前后端分离版（vue+springboot）在 src/utils/request.js 文件中完成了 axios 的核心封装，包含请求拦截、响应拦截、异常处理、token 携带等关键逻辑。
1. 核心封装代码（request.js）
javascript
运行
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 基础请求地址（从环境变量读取）
timeout: 5000 // 请求超时时间
});
// 请求拦截器：请求发送前的处理（如携带token）
service.interceptors.request.use(
config => {
// 1. 如果已登录，在请求头中携带token（若依默认token字段为Authorization）
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + getToken();
}
// 2. 自定义请求头（如Content-Type）
config.headers['Content-Type'] = 'application/json;charset=utf-8';
return config;
},
error => {
// 请求错误处理
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器：接收响应后的处理（如统一异常处理）
service.interceptors.response.use(
/**
* 1. 若返回的状态码为200，则解析数据；
* 2. 若依后端统一返回格式：{ code: 200, msg: "成功", data: {} }
*/
response => {
const res = response.data;
// 1. 状态码非200则视为错误（若依后端自定义状态码）
if (res.code !== 200) {
Message({
message: res.msg || '请求失败',
type: 'error',
duration: 5 * 1000
});
// 2. 特殊状态码处理：如token过期（401）、权限不足（403）
if (res.code === 401 || res.code === 403) {
// 弹出确认框，跳转到登录页
MessageBox.confirm(
'登录状态已过期，请重新登录',
'提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload(); // 刷新页面，跳转到登录页
});
});
}
return Promise.reject(new Error(res.msg || '请求失败'));
} else {
// 3. 成功则返回数据
return res;
}
},
error => {
// 网络错误/服务器错误处理
console.log('err' + error);
Message({
message: error.message || '服务器错误',
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;
2. 关键配置说明
表格
| 配置项 | 作用 | 若依默认值 |
|---|---|---|
baseURL |
基础请求地址 | 从环境变量 VUE_APP_BASE_API 读取（如 /dev-api） |
timeout |
请求超时时间 | 5000ms（5 秒） |
headers.Authorization |
携带 token | Bearer + token（JWT 格式） |
| 响应拦截 | 统一处理状态码 | 非 200 弹错误提示，401/403 跳登录页 |
二、axios 的实际使用场景（若依项目中）
若依框架将接口请求按模块拆分到 src/api 目录下，比如用户模块 src/api/system/user.js，下面以用户模块为例讲解使用方式。
1. 定义接口（api/system/user.js）
javascript
运行
import request from '@/utils/request';
// 1. 获取用户列表（GET请求，传参数）
export function listUser(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query // GET请求参数拼在URL后
});
}
// 2. 新增用户（POST请求，传JSON数据）
export function addUser(data) {
return request({
url: '/system/user',
method: 'post',
data: data // POST请求参数放在请求体
});
}
// 3. 修改用户（PUT请求）
export function updateUser(data) {
return request({
url: '/system/user',
method: 'put',
data: data
});
}
// 4. 删除用户（DELETE请求，路径传参）
export function delUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'delete'
});
}
// 5. Excel导入（POST请求，上传文件）
export function importUser(file) {
const formData = new FormData();
formData.append('file', file);
return request({
url: '/system/user/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data' // 上传文件需指定Content-Type
}
});
}
2. 组件中调用接口
vue
<template>
<div>
<!-- 获取用户列表 -->
<el-button @click="getUserList">获取用户列表</el-button>
<!-- 导入Excel -->
<el-upload
action="#"
:before-upload="beforeImport"
accept=".xlsx,.xls"
:auto-upload="false">
<el-button type="success">导入Excel</el-button>
</el-upload>
</div>
</template>
<script>
import { listUser, importUser } from '@/api/system/user';
export default {
methods: {
// 1. 获取用户列表（带参数）
async getUserList() {
try {
const res = await listUser({
pageNum: 1,
pageSize: 10,
userName: 'admin' // 模糊查询用户名
});
console.log('用户列表：', res.data);
// 渲染数据到表格
} catch (error) {
console.error('获取列表失败：', error);
}
},
// 2. Excel导入
async beforeImport(file) {
try {
const res = await importUser(file);
this.$message.success(res.msg);
} catch (error) {
this.$message.error('导入失败：' + error.message);
}
return false; // 阻止默认上传行为
}
}
};
</script>
三、若依 axios 进阶配置
1. 环境变量配置（不同环境的 baseURL）
若依在根目录的 .env.development、.env.production 文件中配置环境变量：
env
# 开发环境
VUE_APP_BASE_API = '/dev-api'
# 生产环境
VUE_APP_BASE_API = '/prod-api'
配合 vue.config.js 的代理配置，解决跨域问题：
javascript
运行
module.exports = {
devServer: {
port: 80,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://localhost:8080', // 后端接口地址
changeOrigin: true, // 开启跨域
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' // 去掉前缀
}
}
}
}
};
2. 取消请求（防止重复请求）
javascript
运行
// 在request.js中添加取消请求的逻辑
import axios, { CancelToken } from 'axios';
// 存储请求的取消令牌
const pendingRequests = new Map();
// 请求拦截器中添加取消逻辑
service.interceptors.request.use(
config => {
// 取消之前的重复请求
const key = config.url + '&' + config.method;
if (pendingRequests.has(key)) {
pendingRequests.get(key)('取消重复请求');
pendingRequests.delete(key);
}
// 添加新的取消令牌
config.cancelToken = new CancelToken(cancel => {
pendingRequests.set(key, cancel);
});
// ... 原有逻辑
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器中移除取消令牌
service.interceptors.response.use(
response => {
const key = response.config.url + '&' + response.config.method;
pendingRequests.delete(key);
// ... 原有逻辑
},
error => {
const key = error.config.url + '&' + error.config.method;
pendingRequests.delete(key);
// ... 原有逻辑
}
);
总结
若依最新前后端分离源码下载：
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
4
0- 0
已为社区贡献23条内容
所有评论(0)