全局设置loading

基于vue-element-admin 基础模板开发

在request拦截器中添加loading的配置

import { Loading } from 'element-ui'
let loadinginstace;
// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
    //加载loading动画,如果写在外一层 则登录的时候也会有动画
       loadinginstace = Loading.service({
      lock: true,
      // text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(250, 250, 250, 0.8)',
      customClass: "osloading",
      fullscreen: true
    })
   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   return config
  },
  error => {
    loadinginstace.close()
    Promise.reject(error)
  }
);

然后在响应拦截器中关掉loading，关掉loading的代码为loadinginstace.close()，但是存在一个问题是这样如果请求比较快，就会出现闪烁。因此，可以添加一个setTimeout来延迟这个效果，如下添加了一个200ms的延时，这样就可以解决闪烁问题。

// 响应拦截器
service.interceptors.response.use(res => {
setTimeout(() => {
      loadinginstace.close()
    }, 200)
})

在r最后一个err中也需要设置个关闭

 error => {
    loadinginstace.close()
    // console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }