Vue项目整体添加加载中Loading页面

因为Vue通过axios请求后端数据 , 请求过程始终是异步的 , 开始想着用一个变量标识 , 进而让他显示加载中或者隐藏掉加载中的界面

后来发现页面中多模块都发起了不同的请求,这样的话 , 全部是异步的 , 该什么时候隐藏加载中模块就不得而知了

因此基于上面的问题 , 我在拦截器中进行了处理
让其在request请求拦截器中进行展示加载中页面
让其在response响应拦截器中进行隐藏加载中页面

代码如下

这是我的发起请求的封装的工具类

import axios from 'axios'
import {Loading, Message, MessageBox} from 'element-ui'// 创建axios实例
const service = axios.create({baseURL: "http://test.ad.spergol.com:8080/", // api 的 base_url//baseURL: "http://localhost:8080/", // api 的 base_urltimeout: 300000 // 请求超时时间
});// 第三步 http request 拦截器
service.interceptors.request.use(config => {showLoaing()return config},err => {return Promise.reject(err);})// response 拦截器
service.interceptors.response.use(response => {/*** code为非20000是抛错 可结合自己业务进行修改*/const res = response.data;// debuggerif (res.code !== 20000) {Message({message: res.message,type: 'error',duration: 5 * 1000})return Promise.reject('error')} else {hideLoading()return response.data}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)let loading;
let loadingCount = 0;
function start() {loading = Loading.service({lock: true,text: '加载中',background: 'rgba(0,0,0,0.7)'})
};
function end() {loading.close();
}
function showLoaing() {if (loadingCount == 0) {start();};loadingCount++
};function hideLoading() {loadingCount--;if (loadingCount == 0) {end()}
}export default service

Vue项目整体添加加载中Loading页面相关推荐

vue项目首屏加载过慢解决方案
前言因为我的一个vue项目首页打开加载了好久,所以决定优化一下.发现是打包体积太大了,页面才加载慢主要是第三方库. 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点 ...
css3加载中loading代码js特效大全
下载地址 css3加载中loading代码特效大全,非常多的预加载动画特效代码. dd:
css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
vue 一直加载_vue加载中loading提示信息(iView Spin)
场景在一些按钮的点击操作中,假如没有限制,用户多次点击,会向后台发送多次请求. 还有一种情况是:当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩:加载中....这个操作和 ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...
JQuery datatables 给表格添加加载中效果
JQuery datatables 中如果有很多数据的话,加载就会很慢,这时候就需要使用加载中的效果,而datatables是提供了加载中的属性的:processing,加载中的style样式也是可 ...
vue 加载中loading……
使用vue3组件的加载效果提示:当前使用的是vue3 中的 Ant Design vue 组件链接:https://www.antdv.com/components/spin-cn 1.html ...
iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...

Vue项目整体添加加载中Loading页面

Vue项目整体添加加载中Loading页面相关推荐

最新文章

热门文章