vue element admin中发送请求和设置loading效果

需求：在表格数据加载完成前进入loading显示数据正在加载，数据加载完成后取消loading效果，axios的超时处理和异常的处理之后进行取消loading效果。
小编接下来就根据这个这个需求进行分析：
1）首先是配置axios，在main.js当中进行引入axios import axios from 'axios' 这里是手动导入的axios 没有用框架自带的。
然后再main.js当中注册自己的axios Vue.prototype.$axios = axios 接下来就可以在自己的vue文件里面使用$axios进行发送请求了使用axios发送get请求和post请求请见：

2）设置axios的超时，在main.js里面进行设置axios.defaults.timeout = 6000; 这里设置的是6秒，然后进行添加request和response的拦截器

在mian.js当中进行如下的设置

// 添加request拦截器
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// 添加response的拦截器
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

设置以后便可以在请求的catch(error=> {doSomthing})里面进行相应的操作可以进行重新发送请求或者清除loading的动画效果
3）loading动画的设置
在自己的vue文件当中进行设置在我这里是在table当中进行的设置也就是在template当中进行添加属性el-table-column中进行的设置 在template当中进行添加属性v-loading

<el-table-column prop="ID" label="序号" width="60" resizable="true" v-loading="loading">

然后再在data中进行设置

loading: this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })

之后再axios发送请求获取到数据之后进行添加 this.loading.close();
最后当数据请求异常的时候释放loading

this.$axios.get().then(
	res=>{
		doSomthing
		this.loading.close()	
		}).catch(error=>{
			doSomthing
			this.loading.close()
	})

这样既可在数据请求的时候进入loading页面，数据请求成功释放loading，数据请求失败做出相应的处理并释放loading
需要注意的是当再次进行数据请求的时候需要进行设置loading=true。
这次的分享就到这里，如果有什么疑问欢迎提问。