学习目标：
【使用axios的拦截器，实现最简单的全局loading效果】
具体实现步骤—都在main.js里面操作：
【步骤一】
//导入element-ui'import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";单独引入一个loading组件import {Loading } from "element-ui";Vue.use(ElementUI);
【步骤二】
let loadingAll;配置一个loading实例，方便后面使用let loading_count = 0; //请求计数器
【步骤三】写两个函数，一个开始loading、一个结束loading
function startLoading() {if (loading_count == 0) {loadingAll = Loading.service({lock: true,text: "别急，请求加载数据中...",fullscreen:true,background: "rgba(0,0,0,0.7)",spinner: 'el-icon-loading',//自定义加载图标类名});}//请求计数器loading_count++;}function endLoading() {loading_count--;//只要进入这个函数，计数器就自减，直到。。if (loading_count <= 0) {loadingAll.close();}}
【步骤四】拦截器这边
// 请求拦截器Axios.interceptors.request.use(function(config) {startLoading()return config;},function(error) {// 对请求错误做些什么return Promise.reject(error);});// 响应拦截器Axios.interceptors.response.use(function(response) {endLoading()return response;},function(err) {// 对响应错误做点什么endLoading()这里的判断可加可不加，看心情if (err && err.response) {switch (err.response.status) {case 400: err.message = '请求错误(400)'; break;// case 401: this.$router.push('/login'); break;case 403: err.message = '拒绝访问(403)'; break;case 404: err.message = '请求出错(404)'; break;case 408: err.message = '请求超时(408)'; break;case 500: err.message = '服务器错误(500)'; break;case 501: err.message = '服务未实现(501)'; break;case 502: err.message = '网络错误(502)'; break;case 503: err.message = '服务不可用(503)'; break;case 504: err.message = '网络超时(504)'; break;case 505: err.message = 'HTTP版本不受支持(505)'; break;default: err.message = `连接出错(${err.response.status})!`;}} else {err.message = '连接服务器失败!'}return Promise.reject(err);});
OK，到这里功能就基本实现了。
反思与总结：
【个人总结的实现loading的三种思路】
用vuex状态管理，state里面储存loading的状态，然后 mutations 里面 改变 loading的状态用setTimeOut来处理，等到几秒到了以后加载你写好的loading效果，然后开始发请求加载数据axios拦截器实现，发起请求前加载，数据响应前关闭
能力有限，欢迎纠错，一起进步。
