学习目标:
【使用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拦截器实现,发起请求前加载,数据响应前关闭
能力有限,欢迎纠错,一起进步。