axios请求封装和异常统一处理
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开源项目在运行),因此小伙伴们只能将就看一下下面的截图了,GitHub上有部署教程,部署到本地也可以查看完整效果。
项目地址:https://github.com/lenve/vhr
前面几篇文章,我们已经基本解决了服务端的问题,本文我们主要来聊聊前端网络请求的封装。
本文是本系列的第四篇,建议先阅读前面的文章有助于更好的理解本文:
1.SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)
2.SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(二)
3.SpringSecurity中密码加盐与SpringBoot中异常统一处理
前端网络请求封装
前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时、服务器内部错误、权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了axios中的拦截器功能。
封装后的网络请求工具js如下:
import axios from 'axios' import {Message} from 'element-ui' axios.interceptors.request.use(config=> { return config; }, err=> { Message.error({message: '请求超时!'}); return Promise.resolve(err); }) axios.interceptors.response.use(data=> { if (data.status && data.status == 200 && data.data.status == 'error') { Message.error({message: data.data.msg}); return; } return data; }, err=> { if (err.response.status == 504||err.response.status == 404) { Message.error({message: '服务器被吃了⊙﹏⊙∥'}); } else if (err.response.status == 403) { Message.error({message: '权限不足,请联系管理员!'}); }else { Message.error({message: '未知错误!'}); } return Promise.resolve(err); }) let base = ''; export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); } export const uploadFileRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'multipart/form-data' } }); } export const putRequest = (url, params) => { return axios({ method: 'put', url: `${base}${url}`, data: params, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); } export const deleteRequest = (url) => { return axios({ method: 'delete', url: `${base}${url}` }); } export const getRequest = (url) => { return axios({ method: 'get', url: `${base}${url}` }); }[/code]
封装之后的错误信息这个大家一目了然,没啥好说的,唯一要说的是当出错的时候我执行的是:
Promise.resolve(err);,而不是
Promise.reject(err);
这是什么原因呢?因为封装axios一个重要的目的就是希望能够对错误进行统一处理,不用在每一次发起网络请求的时候都去处理各种异常情况,将所有的异常情况都在工具js中进行统一的处理。但是这种方式也带来一个问题,就是我在发起网络请求的时候,一般都会开启一个进度条,当网络请求结束时,不论请求成功还是失败,我都要将这个进度条关闭掉,而失败的处理我都统一写在工具js里边了,因此就没在请求失败时关闭进度条了,解决这个问题,有两种方案:
1.直接在request的拦截器中开启一个fullscreen的loading,然后在response的拦截器中将其关闭,即我将进度条也封装到工具js中了,但是非常不推荐这种方式,因为这种方式的用户体验非常之差,有兴趣的小伙伴可以自己试一下就知道了。
2.第二种解决方案就是大家看到的,我返回一个
Promise.resolve(err),则这个请求不会就此结束,错误的message我已经弹出来了,但是这条消息还是会继续传到then中,也就是说,无论请求成功还是失败,我在成功的回调中都能收到通知,这样我就可以将loading关闭了,比如下面这个登录请求:
var _this = this; this.loading = true; this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { _this.loading = false; if (resp && resp.status == 200) { _this.getRequest("/config/hr").then(resp=> { if (resp && resp.status == 200) { var data = resp.data; _this.$store.commit('login', data); var path = _this.$route.query.redirect; _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path}); } }) } });[/code]
添加Vue插件
由于我对axios进行了封装,因此在每一个需要使用axios的地方,都需要导入相应的请求,略显麻烦,参考https://cn.vuejs.org/v2/guide/plugins.html,我将请求方法挂到Vue上,具体操作如下:
1.在main.js中导入所有的请求方法,如下:
import {getRequest} from './utils/api' import {postRequest} from './utils/api' import {deleteRequest} from './utils/api' import {putRequest} from './utils/api'[/code]
2.把它们添加到 Vue.prototype 上,如下:
Vue.prototype.getRequest = getRequest; Vue.prototype.postRequest = postRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest;[/code]
如此之后,以后再需要发送网络请求,就不需要导入api了,直接通过下面这种方式即可:
this.postRequest('/login', { username: this.loginForm.username, password: this.loginForm.password }).then(resp=> { ... } });[/code]
OK,如此之后,网络请求处理就so easy了。
- 点赞
- 收藏
- 分享
- 文章举报
- axios请求封装和异常统一处理
- axios请求封装和异常统一处理
- 转-封装网络请求库,统一处理通用异常 (基于volley网络请求库)
- 封装网络请求库,统一处理通用异常 (基于volley网络请求库)
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- axios对请求各种异常情况处理的封装方法
- 解决vue+axios请求报错POST http: net::ERR_CONNECTION_REFUSED,在封装的请求中统一处理请求异常的问题
- Rxjava +Retrofit 你需要掌握的几个技巧,Retrofit缓存,RxJava封装,统一对有无网络处理,异常处理, 返回结果问题
- springboot + shiro 权限注解、统一异常处理、请求乱码解决
- react请求数据统一处理(axios)
- 封装ajax方法(统一处理登录超时异常)
- Spring MVC异常统一处理(包括普通请求异常以及ajax请求异常)
- 统一处理jquery ajax请求过程中的异常错误信息的机制
- springboot + shiro 权限注解、统一异常处理、请求乱码解决
- CheckedException和unCheckedException理解及Spring 统一异常处理和封装
- 【SpringBoot】web进阶——表单验证,AOP统一处理请求日志,统一异常处理,单元测试
- RxJava + Retrofit+okhttp 封装,包含对相同格式请求数据、相同格式返回数据处理,显示 Material Design 加载 dialog,文件上传下载进度展示、全局异常捕捉。
- 想抛就抛:Application_Error中统一处理ajax请求执行中抛出的异常
- Spring MVC统一异常处理(包含普通请求异常和ajax请求异常)
- ajax和普通请求使用spring mvc在controller中的异常统一处理