【无标题】

如何把部分接口的请求loading时去掉?

以下是具体操作事项:

1.axios请求中这样写
axios.interceptors.request.use(config=>{
	let baseUrls = config.baseURL
	let whiteList = [
	  {url:baseUrls+请求地址}
	]
	let flag = false
	whiteList.forEach((item)=>{
		if(item.url.indexOf(config.url)!==-1){
			flag = true
		}
	})
	if(!flag){
		store.commit('SHOW_LOADING')
	}else{
		store.commit('Hidding_LOADING')
	}
	return config
	
})
axios.interceptors.response.use(
	response => {
		store.commit('Hidding_LOADING')
		return response.data
	},
	error => {
		store.commit('Hidding_LOADING')
	}
)
2.在vuex中这样写
import Vuex from "vuex"
const store = new Vuex.Store({
	state:{
		loading:false
	}
	mutations:{
		SHOW_LOADING:(state) => {
			state.loading = true
		}
		HIDDING_LOADING:(state) => {
			state.loading = false
		}
	}
})
export default store
3.封装loading组件
<template>
	<div class="loading" v-if="isShowLoading">
		<van-loading coloc="#fcc800">加载中...</van-loading>
	</div>
</template>
<script>
	export default{
		name:"loading",
		props:{
			isShowLoading:{
				type:Boolean,
				default:false
			}
		}
	}
</script>
<style lang="less" scoped>
	.loading{
		position:fixed;
		right:0;
		left:0;
		z-index:100;
		height:100%;
		display:flex;
		justify-content:center;
		align-items:center
	}
</style>
4.APP中使用
<template>
	<Loading :isShowLoading="stores.loading"/>
</template>
<script>
import Loading from "@/components/layouts/loading.vue"
import stores from "@/store"
export default{
	name:"App",
	components:{
		Loading
	},
	
}

</script>

版权声明:本文为tan_xiao_tan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。