Vue的全局组件/加载/Loading/请求转圈圈组件

Vue每次请求都要出现加载图案，这样的需求需要设置一个全局的组件，然后每次请求和请求结束都要调用这个组件的开关。这样就可以实现展示给用户看系统在请求后台的需求。
首先：
1.制作一个全局的加载组件，Loading.vue 摆放的路径请随意，以下提供两个加载，一个是用图片加载的，一个是利用vant 的ui遮罩层和Loading样式制作的。

1.1 vant ui的

<template>
<div style="margin-top: 4rem">
<van-overlay :show="true" style="background-color: rgba(0, 0, 0, 0)">
<van-loading class="wrapper" type="spinner" />
</van-overlay>
</div>
</template>

<script>
export default {
name: 'Loading'
}
</script>

<style lang="less" scoped>
</style>

1.2 自定义用图片，附上git图片

<template>
<div>
<div class="modal-mask modal-transition" >
<div class="modal-wrapper"  >
<div class="modal-container">
<!-- <span class="iconfont" style="font-size: 4rem;margin-left: 30%">&#xe733;</span>-->
<img style="height: 40px;margin-left: 35%" src="static/mediaFile/loading.gif" />
</div>
</div>
</div>
</div>
</template>

<script>
import { Loading } from 'vux'
export default {
name: 'Myloading',
components: {
Loading
},
data () {
return {
}
},
methods: {
},
mounted () {
}
}
</script>

<style lang="less">
.modal-mask{
background-color: transparent;
position: fixed;
width: 100%;
height:100%;
top:0;
left: 0;
z-index: 99;
display: table;
}
.modal-wrapper{
background-color: transparent;
display: table-cell;
vertical-align: middle;
}
.modal-container{
background-color: transparent;
margin: auto;
top: 50%;
width: 300px;
padding: 20px 30px;
}
.modal-header h3{
background-color: transparent;
margin-top: 0;
color:#42b983;
}
.modal-body{
background-color: transparent;
margin: 20px 0;
}
.modal-default-button{
background-color: transparent;
float: right;
}
</style>

2.在App.vue中引入组件

<template>
<div id="app">
<router-view></router-view>
<myloading v-if='LOADING' style="position: fixed;z-index: 200"></myloading>
<div style="height:3rem;"></div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import Myloading from './components/global/loading' //加载组件的位置
export default {
name: 'app',
components: {Myloading},
computed: {
...mapState([
'LOADING'
])
},
data: function () {
return {

}
},
methods: {
},
mounted () {
}
}
</script>
<style  lang="less">

</style>

3.在store文件夹下的index.js中加上控制组件展示和关闭的开关

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'js-cookie';
Vue.use(Vuex)

const state = {
LOADING: false
}

const mutations = {
// 加载框
showLoading (state) {
state.LOADING = true
},
hideLoading (state) {
state.LOADING = false
}
}
}
export default new Vuex.Store({
state,
mutations
})

4.在你用axios发送请求的拦截器上进行控制

4.1 请求时

axios.interceptors.request.use(
config => {
store.commit('showLoading')
return config
},
error => {
store.commit('hideLoading')
return Promise.reject(error)
}
)

4.2 请求返回时

axios.interceptors.response.use(
response => {
console.log('response:', response.data.code)
store.commit('hideLoading')
return response
},
error => {
if (error.response) {
console.log('response ERROR:', error.response)
tryAgain(error)
return Promise.reject(error.response.data)
}
}
)

以上操作即可实现加载组件的设置