如何把部分接口的请求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>