博客

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)
    }
  }
)

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