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

如何把部分接口的请求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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值