本文介绍了在Spring Boot和Vue.js的前后端分离项目中，如何进行前端HTTP请求的封装。通过设置axios的请求和响应拦截器，处理错误信息并提供统一的提示。此外，还展示了如何将请求方法封装成Vue插件，简化在Vue组件中的调用。最后，作者分享了自己的前端开发经验，并提供了全面的前端学习资源。
}, err => {
Message.error({message: ‘请求超时!’});
})
axios.interceptors.response.use(data => {
if (data.status && data.status == 200 && data.data.status == 500) {
Message.error({message: data.data.msg});
return;
}
if (data.data.msg) {
Message.success({message: data.data.msg});
}
return data.data;
}, err => {
if (err.response.status == 504 || err.response.status == 404) {
Message.error({message: ‘服务器被吃了⊙﹏⊙∥’});
} else if (err.response.status == 403) {
Message.error({message: ‘权限不足,请联系管理员!’});
} else if (err.response.status == 401) {
Message.error({message: err.response.data.msg});
} else {
if (err.response.data.msg) {
Message.error({message: err.response.data.msg});
}else{
Message.error({message: ‘未知错误!’});
}
}
})
代码解释：
-
首先导入 axios 和 Massage 组件
-
接下来定义一个请求拦截器
-
最后定义一个响应拦截器，这个拦截器有两个参数，第一个参数 data 表示服务端处理成功的响应，第二个 err 表示服务端处理失败的响应。对照着 jQuery 中的 Ajax ，第一个相当于 success 回调，第二个相当于 error 回调。
-
响应的 data 表示服务端返回的数据，数据格式是
{data:{s
最低0.47元/天 解锁文章
7553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
