需求：在表格数据加载完成前进入loading显示数据正在加载，数据加载完成后取消loading效果，axios的超时处理和异常的处理之后进行取消loading效果。
小编接下来就根据这个这个需求进行分析：
1）首先是配置axios，在main.js当中进行引入axiosimport axios from 'axios'这里是手动导入的axios 没有用框架自带的。
然后再main.js当中注册自己的axiosVue.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 sentreturn config;}, function (error) {// Do something with request errorreturn Promise.reject(error);});// 添加response的拦截器axios.interceptors.response.use(function (response) {// Do something with response datareturn response;}, function (error) {// Do something with response errorreturn 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=>{doSomthingthis.loading.close()}).catch(error=>{doSomthingthis.loading.close()})
这样既可在数据请求的时候进入loading页面，数据请求成功释放loading，数据请求失败做出相应的处理并释放loading
需要注意的是当再次进行数据请求的时候需要进行设置loading=true。
这次的分享就到这里，如果有什么疑问欢迎提问。
