element-ui使用axios进行全局控制loading

我们使用的是vue-cli+element-ui的方式，需要对element-ui的loading.service的样式进行一下调整

在App.vue里面

.el-loading-mask{background: transparent}
.el-loading-spinner{
  width: 150px;
  padding: 20px 0;
  left: 0;
  right: 0;
  margin: auto;
  background:#fff;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 0 30px #ccc;
  i{
    font-size: 30px;
    margin-bottom: 5px;
  }
}

我们通过vuex来控制loading

store.js

export default new Vuex.Store({
  state: {
    loading: '',
    isLoading: false,
  },
  mutations: {
   showLoading(state) {
      state.loading = Loading.service({
        text: '加载中...',
        lock: true,
        spinner: 'el-icon-loading',
      })
      console.log('loading start')
      state.isLoading = true
    },
    hideLoading(state) {
      if (state.isLoading) {
        console.log('loading close')
        state.loading.close()
        state.isLoading = false
      }
    },
  }
})

然后在axios拦截器里面进行设置，request.js

import axios from 'axios'
import router from '../router'
import store from '../store'
import { Message } from 'element-ui'

// (添加请求拦截器)
axios.interceptors.request.use((config) => {
  const { headers, params, data } = config
  headers.common.Authorization = store.state.token
  if ((params && params.loading) || (data && data.loading)) {
    store.commit('showLoading')
  }
    return config;
  }, (error) => {
    store.commit('hideLoading')
    return Promise.reject(error)
  },
);

// 添加响应拦截器
axios.interceptors.response.use(({ data, config: { params, data : res } }) => {
  if ((params && params.loading) || (res && res.loading) || (res && res.indexOf('loading') > -1)) {
    store.commit('hideLoading')
  }
  if (data.sys_code === 401) {
    router.replace({ path: '/login' })
    store.dispatch('resetUserInfo')
    return Promise.reject(data)
  }
  if (data.code !== 0) {
    if (data.sys_code === 1204) {
      router.replace({ path: `/404?code=403&title=${data.message}` })
    }
    Message({ message: data.message, type: 'error'})
    return Promise.reject(data)
  }
  return data
}, (error) => {
  // 请求错误时做些事
  let errMsg = ''
  const str = error.toString();
  if (str.indexOf('timeout') > 0) {
    errMsg = '请求超时，请刷新后重试！'
  } else {
    errMsg = '服务器内容部错误！'
  }
  Message({ message: error.message || errMsg, type: 'error'})
  store.commit('hideLoading')
  return Promise.reject(error)
});

最后我们只需要在请求的参数上面加上loading: true就可以显示loading了

使用方法

methods: {
  async getList() {
    const { data: { items } } = await this.$api.role.list({ params: { loading: true }})
    this.list = items
  }
}

显示效果

码字不易，给个赞吧