element ui 的loading 在axio.js的拦截器中怎么使用,想让所有的请求都有loading的效果

Question

element ui 的loading 在axio.js的拦截器中怎么使用,想让所有的请求都有loading的效果

Answer 1

在axios拦截的代码文件中引入element ui
在axios的请求拦截中，全屏加载。
在aixos的响应拦截中，关闭加载。

……//引入element-ui和Vue
//全屏加载设置
const LOADING = {
  lock: true,
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
};
let loading;
//请求拦截
axios.interceptors.request.use(config => {
  loading = Vue.$loading(LOADING);
  return config
}, error => {
  loading.close();
  return Promise.reject(error)
})
//响应拦截
axios.interceptors.response.use(data => {
  loading.close();
  return Promise.resolve(data);
}, error => {
  loading.close();
  return Promise.reject(error)
})

Answer 2

全局注册这个组件，在app.vue里import这个组件，Vue.use()一下。在去你请求的地方设置state，一般有vuex直接交给vuex去做，设置两个action方法。来操控loading的显示