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

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

1.1 vant ui的

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

2.在App.vue中引入组件

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

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