全局加载

## 全局加载

初始化全局loading状态

let loading = null

封装loading显示与隐藏的方法

// 显示加载
function showLoading() {
	if (requestCount === 0) {
		loding = 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.loding === true) {
		// 显示加载
		showLoading()
	}
	// console.log(config)
	// 在发送请求之前做些什么
	return config;
}, (error) => {
	// 隐藏加载
	hideLoading()
	// 对请求错误做些什么
	return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((response) => {
	console.log("响应拦截器 成功")
	// 隐藏加载
	hideLoading()
	// 对响应数据做点什么
	return response;
}, (err) => {
	// console.log("响应拦截器 失败")
	// console.log(err)

	if (err.response && err.response.data && err.response.data.errorCode) {
		// this.$message.error(err.response.data.msg);
		Vue.prototype.$message(err.response.data.msg);
	}
	// 隐藏加载
	hideLoading()
	// 对响应错误做点什么
	return Promise.reject(err);
});

解决loading同时显示多个问题

初始化变量requestCount用于计数

let requestCount = 0

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

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

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

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

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

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

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

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

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