2018年11月

很多时候,我们在页面使用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状态,这样的话用户看起来会很迷茫,所以我们在调用的时候,先判断一下这个状态。
然后在响应拦截器里面关掉它就好了
loading.png

项目类型:vue+vux+axios

刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面。直接调用接口,一切正常。
然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值。刚开始一切都是按照预期的结果来走的。就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我的脸上。一脸懵逼的我以为是接口的问题,可是在组件里面直接用console.log打印出来的数据又是对的。
lj1.png
然后我突然想到了一个问题,直接点击页面返回的话,确实是OK的,但是如果按F5手动刷新的话,Axios并不会直接走main.js里面的拦截器代码。

后来我把拦截器放在了封装的http.js里面,结果就一切正常了,不过郁闷的是放在了外面以后,vux的提示插件没有办法用了。
打印了this指针,果不其然的undefind了,后来想到了一个比较变通的方法,我在index.html里面增加了一个var app用来存储main里面初始化的vue对象,并且在main.js里面把初始化的vue对象给赋值到windows.app上面,这样全局都可以使用了。
lj2.png
把vux的提示代码加上window.app.$vux.toast.show 完美解决问题!

官方文档并没有说明通过npm安装以后,如果在vue里面使用,我今天研究了一下,可以用插件的方法引入进去。
首先,通过npm安装mathjs

npm install mathjs --save

然后在main.js里面通过import引入

import math from 'mathjs'

然后重点来了。
在后面加入

Vue.prototype.$math = math

加入以后,在项目里就可以使用了
使用方法比如

this.$math.add(5,3) // 返回的结果等于8