首页
工具箱
Search
1
Vue vben admin 2.0的封装部分坑点
1,548 阅读
2
python生成剪映草稿解析
1,427 阅读
3
百度地图坐标系对腾讯地图坐标系转换
1,253 阅读
4
VUE中使用mathjs的方法
1,164 阅读
5
解决Ant Design Vue的Select搜索指定字段的问题
1,088 阅读
技术宅的演示性文稿
技术宅的吐槽文档
一个的舞台
唱唱反调
老文章归档
光年计划
登录
Search
标签搜索
老文章
CS
长春
大学
程序员
vue
酷游CS俱乐部
dedecms
织梦
php
vant
小程序
军训
缘
ie6
google
大连
2012
js
ecshop
茶树虾
累计撰写
306
篇文章
累计收到
125
条评论
首页
栏目
技术宅的演示性文稿
技术宅的吐槽文档
一个的舞台
唱唱反调
老文章归档
光年计划
页面
工具箱
搜索到
2
篇与
axios拦截器
的结果
2018-11-08
Vux+Axios拦截器增加loading的问题
很多时候,我们在页面使用Ajax刷新时候,会希望它出现loading的图标,让用户体验更好一些。那么如果我们每次在Axios里面进行请求,都要显示loading图标的话,那么没有一个全局的方法的话,势必会造成代码冗余的问题。有什么方法可以实现这个方法呢?这里,我们就要用到Axios的请求拦截器与相应拦截器了首先,我们在请求拦截器里面增加一个VUX的loading组件axios.interceptors.request.use( config => { //请求拦截器,调用loading插件 // 显示loading // 判断是否重复提交请求,也就是loading是否还存在,如果存在则不显示新的loading let isShow = window.app.$vux.loading.isVisible() if(!isShow&&config.showLoading){ window.app.$vux.loading.show({ text: 'Loading' }) } config.data = JSON.stringify(config.data); config.headers = { 'Content-Type': 'application/json', } return config; }, error => { return Promise.reject(err); } ); 整个数据里面,我们看到了里面有一个参数是$vux.loading.isVisible()这个。这个是vux自带的一个loading状态显示的参数。如果loading正在显示的话,它会是true,否则的话就显示false因为我们不希望同时有多个请求的时候,出现多个loading状态,这样的话用户看起来会很迷茫,所以我们在调用的时候,先判断一下这个状态。然后在响应拦截器里面关掉它就好了
2018年11月08日
199 阅读
1 评论
1 点赞
2018-11-08
关于VUE在封装了Axios后手动刷新页面拦截器无效的问题。
项目类型:vue+vux+axios刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面。直接调用接口,一切正常。然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值。刚开始一切都是按照预期的结果来走的。就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我的脸上。一脸懵逼的我以为是接口的问题,可是在组件里面直接用console.log打印出来的数据又是对的。然后我突然想到了一个问题,直接点击页面返回的话,确实是OK的,但是如果按F5手动刷新的话,Axios并不会直接走main.js里面的拦截器代码。后来我把拦截器放在了封装的http.js里面,结果就一切正常了,不过郁闷的是放在了外面以后,vux的提示插件没有办法用了。打印了this指针,果不其然的undefind了,后来想到了一个比较变通的方法,我在index.html里面增加了一个var app用来存储main里面初始化的vue对象,并且在main.js里面把初始化的vue对象给赋值到windows.app上面,这样全局都可以使用了。把vux的提示代码加上window.app.$vux.toast.show 完美解决问题!
2018年11月08日
263 阅读
0 评论
1 点赞