bus是vue自身就携带的,不用引入,方便但不适合广泛使用。
前情提要:
vue+ant design vue
ant design vue这个ui框架那是真不好用,我想要做全局的弹窗,需要在http工具js中根据axios的请求情况来控制到App.vue中spin组件。。。
//@/utils/bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus
//这里为什么没选择挂载在this上呢?因为js文件中莫得this呀
//main.js
import bus from '@/utils/bus';
//挂载到this上
Vue.prototype.$bus = bus;
//@/utils/http.js
//引入bus
import bus from '@/utils/bus';
//在axios请求拦截中和相应拦截器中控制App.vue中的Spin的显示与隐藏
axios.interceptors.request.use(
async config => {
axiosTimes++;
//这里开启Spin蒙层
bus.$emit('wholeSpin',true);
let token = await initToken();
if (token) {
config.headers.token = token;
}
return config;
},
async error => {
message.error('网络不给力,请稍后再试');
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
axiosTimes--;
//所有请求返回后,再关闭Spin蒙层,这里通过bus传值给App.vue
if (axiosTimes == 0) bus.$emit('wholeSpin',false);
let data = response.data;
if (data.isSuccess == false) {
message.warning(response.data.description);
}
if (data.code == 10000) {
console.log(data.code);
console.log(router.currentRoute.fullPath);
router.replace('/login');
}
return response.data;
},
error => {
let errorMsg = '';
if (error) {
console.log(error);
}
if (error && error.response) {
switch (error.response.status) {
case 400:
errorMsg = "请求错误(400)";
break;
case 401:
errorMsg = "未授权,请重新登录(401)";
router.replace({
path: "/login",
query: {
redirect: router.currentRoute.fullPath
},
});
break;
case 403:
errorMsg = "无权限,拒绝访问(403)";
console.log(403);
break;
case 404:
errorMsg = "请求出错(404)";
console.log(404);
break;
case 408:
errorMsg = "请求超时(408)";
console.log(408);
break;
case 500:
errorMsg = "服务器错误(500)";
break;
case 501:
errorMsg = "服务未实现(501)";
console.log(501);
break;
case 502:
errorMsg = "网络错误(502)";
console.log(502);
break;
case 503:
errorMsg = "服务不可用(503)";
console.log(503);
break;
case 504:
errorMsg = "网络超时(504)";
console.log(504);
break;
case 505:
errorMsg = "HTTP版本不受支持(505)";
console.log(505);
break;
default:
errorMsg = `连接错误(${error.response.status})`;
console.log("default");
}
} else {
console.log("连接服务器失败!");
errorMsg = "连接服务器失败!";
//开启Spin蒙层
bus.$emit('wholeSpin',true);
}
message.error(errorMsg);
console.log("errorMsg");
return Promise.reject(error);
}
);
//App.vue
<template>
<div id="app">
<a-spin :spinning="wholeSpin" class="wholeSpin" size="large">
<div class="spin-content">
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</div>
</a-spin>
</div>
</template>
<script>
export default {
data() {
return {
locale: zhCN,
wholeSpin: false
};
},
created() {
this.$bus.$on('wholeSpin', msg => {
//这里获取到http工具js文件中传过来的wholeSpin值
this.wholeSpin = msg;
});
}
}
</script>