全局loading加载_全局加载loading_J橘子的博客-程序员秘密

技术标签： vue

全局加载（loading）

初始化全局loading状态

let loading = null

封装loading显示与隐藏的方法

//显示加载
function showLoading(){
    
   if(requestCount === 0){
    
       loading = Message({
    
           message:"加载中...",
           duration:0
       })
}
//隐藏加载
function hideLoading(){
    
	if(loading){
    
		loading.close()
	}
}

分析：在什么样的情况下显示或隐藏loading
当用户发送请求时：
请求拦截器成功则，显示loading
请求拦截器失败则，隐藏loading

相应拦截器成功与失败皆设置为隐藏loading

//添加请求拦截器
axios.interceptors.request.use((config)=>{
    
	console.log(config)
	let token = window.sessionStorage.getItem("token")
	if(config.token === true){
    
		config.headers.token = token
	}
	if(config.loading == true){
    
		//显示隐藏
		showLoading()
	}
	//console.log(config)
	//再发送请求之前做些什么
	return config;
},(error)=>{
    
	//隐藏加载
	hideLoading();
	//对请求错误做些什么
	return Promise.reject(error);
});

//添加响应拦截器
axios.interceptors.response.use((request)=>{
    
	console.log("响应拦截器 成功")
	//隐藏加载
	hideLoading()
	//对响应数据做点什么
	return response;
},(err)=>{
    
	//console.log(err);
	if(err.response.data && err.response.data.errorCode){
    
	vue.prototype.$message(err.response.data.msg)
	}
	//隐藏加载
	hideLoading()
	//对响应错误做点什么
	return Promise.reject(err);
});

解决loading同时显示多个问题

初始化变量 requestCount 用于计数

let requestCount = 0

通过请求次数决定是否执行显示加载与隐藏加载
如果requestCount值为0 则显示加载并且执行++

// 显示加载
	
	function showLoading(){
    
	//如果requestCount值为0 则显示加载 
		if(requsetCount === 0){
    
			loading = Message({
    
				message:"加载中",
				duration:0
		    })
		}
		//并且执行++
		requsetCount++
	}

如果requestCount 大于0 则自减，并且当loading为true
requestCount===0，则隐藏loading

// 隐藏加载
	function hideLoading(){
    
		if(requsetCount > 0){
    
			requsetCount--
		}
	if(loading && requsetCount === 0){
    
		 loading.close()
	}
	
	}

如果设定通过请求传参的方法决定显示加载则如下

设置指定的属性loading 并给与指定的值，通过请求传递参数触发

  axios.post("admin/logout",{
    },{
    
				  token:true,
				  loading:true
			  })

如果传递了参数，并且值相等，则显示加载

if(config.loading === true){
    
		 // 显示加载
		showLoading()
	}

有什么问题大家可以留言哦！

本文链接：https://blog.csdn.net/rose_LHJ/article/details/115299115

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

好工具推荐——Hutool工具类_执笔记忆的空白的博客-程序员秘密

1、简介Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以“甜甜的”。Hutool中的工具方法来自每个用户的精雕细琢，它涵盖了Java开发底层代码中的方方面面，它既是大型项目开发中解决小问题的利器，也是小型项目中的效率担当；Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。

python学习笔记(关于CSV文件的数据清洗）_csv格式数据清洗_泰勒叫我去学习的博客-程序员秘密

1、读取CSV文件data = pd.read_csv(r'.\')2、看数据大致情况data.info()3、当表很大的时候想看表长什么样子data.head(n)#显示前n行4、删除表的若干列data.trop(['aaa','bbb','ccc'],inplace = True,axis = 1)#删除表头为aaa,bbb,ccc的列，inplace = True并用后来的表去覆盖前面的表5、用均值填补缺失值data['age'] = data['age'].fillna(d

C#创建Windows服务与服务的安装、卸载_c# 服务安装_忧郁的蛋~的博客-程序员秘密

本文章介绍了C#创建Windows服务与服务的安装、卸载，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧Windows 服务（即，以前的 NT 服务）使您能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序。这些服务可以在计算机启动时自动启动，可以暂停和重新启动而且不显示任何用户界面。这种服务非常适合在服务器上使用，或任何时候，为了不影响在同一台计算机上工作的其他用户，需要长时间运行功能时使用。

每日10道JAVA题（20180612）_StrideBin的博客-程序员秘密

1.class A {}class B extends A {}class C extends A {}class D extends B {}Which four statements are true ?A.The type List&lt;A&gt;is assignable to List.B.The type List&lt;B&gt;is assignable to List&lt;A...

simulink仿真及代码生成技术入门到精通pdf_Simulink建模及代码生成资料分享---第二季..._weixin_39545805的博客-程序员秘密

大家好，最近有点忙，更新的速度低于当初设定的Smart Goal, 有点懊悔，这周就迎头赶上。加油！这周的内容是资料分享，这些资料是上次第一季的补充以及最近工作中的总结，以及一些老铁的要求，逐步进行增加，详细内容如下所示，希望对大家的学习，工作能有些帮助！资料来源：网络以及自己之前收集，小蚂蚁只是一个知识搬运工，若你是资料的作者，请联系小编，进行删除，尊重原创从我做起。资料适用群：模型开发的初学...

28379D中如何求PWM死区时间_28379d死区时间设置_史蒂芬_丁的博客-程序员秘密

先来看一个TI官方例程代码片段// ***************************************** // Inverter PWM configuration // **************************************** /* By default on soprano the PWM clock is divided by 2 * Clk...