element-ui实现数据请求失败的动态拦截

最新推荐文章于 2022-11-14 15:44:29 发布

水货——鲈鱼

最新推荐文章于 2022-11-14 15:44:29 发布

阅读量356

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_41162427/article/details/107922913

版权

效果图

在这里插入图片描述

代码(src/main.js)

import Axios from 'axios'
import Qs from 'qs'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)
Vue.prototype.qs=Qs;
Vue.prototype.$axios=Axios;
Vue.config.productionTip = false

let loadingInstance;
Axios.interceptors.request.use(function(config){
//请求数据加载中
  loadingInstance=ElementUI.Loading.service({fullscreen:true,text:"正在请求数据"});
  return config;
}),function(error){
  return Promise.reject(error);
}
Axios.interceptors.response.use(function(response){
//关闭加载中
  loadingInstance.close();
  return response;
}),function(error){
  return Promise.reject(error);
}