新建api/axiosFun.js
封装接口分成了两种方法
- 通用方法不带token接口调用,例如登录接口
- 公用方法,登录成功之后,携带token接口调用
注意事项
- 方法里面有相应的针对某个路由判断组件页面是否使用loadding效果加载,这个可以根据需要添加
import Router from '@/router/index';if(Router.currentRoute.path!="/first/first" && Router.currentRoute.path!="/center/myCenter"){
store.commit("showLoading");
}
完整代码:
1.接口封装
import axios from 'axios';
import Vue from 'vue';
import Router from '@/router/index';
import store from "../vuex/store";//为了使用loading
import { Toast,Dialog } from 'vant';
Vue.use(Toast);
Vue.use(Dialog);
//通用方法,不带token
const reqNull = (method, url, params) => {
return axios({
method: method,
url: url,
headers: {
'Content-Type': 'application/json',
// 'Content-Security-Policy': 'upgrade-insecure-requests'
},
data: params
}).then(res => res.data);
};
// 通用公用方法
const req = (method, url, params) => {
if(Router.currentRoute.path!="/first/first" && Router.currentRoute.path!="/center/myCenter"){
store.commit("showLoading");
}
return axios({
method: method,
url: url,
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('token')}`
},
data: params
}).then(res => {
store.commit("hideLoading");
if (Number(res.data.code) == Number(403)) {
Toast.fail({
message: res.data.msg,
onClose: () => {
localStorage.clear();
sessionStorage.clear();
Router.push({ path: "/" });
}
})
}else if(Number(res.data.code)==Number(405)){
Dialog.confirm({
title: '提示',
message: '您还没有提交认证,请认证',
confirmButtonText: '去认证',
cancelButtonText: '取消',
})
.then(() => {
if(localStorage.getItem("loginType")==0){
Router.push({path:"/personConfirm"})
}else{
Router.push({path:"/companyConfirm"})
}
}).catch(err=>{})
}else if(res.data.code==-2){
Toast('您已提交认证,请耐心等待审核');
}else if(res.data.code==-3){
Dialog.confirm({
title: '提示',
message: '您认证未通过,请重新提交认证',
})
.then(() => {
if(localStorage.getItem("loginType")==0){
Router.push({path:"/personConfirm"})
}else{
Router.push({path:"/companyConfirm"})
}
}).catch(err=>{})
}else {
let resData = res.data;
return resData;
}
}).catch(error => {
store.commit("hideLoading");
});
};
export {
req,
reqNull
}
2.加载loading方法:
- 新建components/loading.vue组件
<template>
<div class="loading">
<van-loading class="loadingVant" vertical type="spinner" color="#1989fa">加载中</van-loading>
</div>
</template>
<script>
export default {
name: 'loading',
data () {
return {}
},
}
</script>
<style scoped lang="scss">
.loading{
position: fixed;
// top:20%;
// left:50%;
z-index:12100;
// transform: translateX(-50%);
width: 100%;
height: 100%;
background: transparent;
display: table-cell;
vertical-align: middle;
text-align: center;
.loadingVant{
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%);
}
.van-loading__text{
color:#1989fa;
}
}
</style>
- App.vue引入loading组件
<template>
<div id="app">
<Loading v-show="loading"></Loading>
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件 -->
</router-view>
</div>
</template>
<script>
import { mapState } from "vuex";
import Loading from "./components/loading";
export default {
components: {
[Button.name]: Button,
Loading
},
name: "App",
data() {
return {
};
},
computed: {
...mapState(["loading"])
}
};
</script>
- 新建store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loading: false
},
getters: {},
mutations: {
showLoading(state) {
state.loading = true;
},
hideLoading(state) {
state.loading = false;
}}
})
发文不易,点赞、收藏、评论、关注一下呗!