Ajax 请求前总是要需要一个 loading 变量来
那么这个 loading
的最佳实践是啥? 每一个 Ajax 都要写一个 loading, 感觉每次重复写很蛋疼,
用 vue 写个示例代码
<template>
<div>
<div class="del" v-loading="loading.del"></div>
<div class="list" v-loading="loading.list"></div>
</div>
</template>
<script>
export default {
name: '',
data: () => ({
loading: {
del: false,
list: false,
},
}),
methods:{
ajaxDel(){
const {loading} = this; // <--- 这一坨
if (loading.del) return ; // <--- 这一坨
loading.del = true; // <--- 这一坨
ajax.get('/del')
.then(() => {...})
.catch(() => {...})
.finally(() => {
loading.del = false; // <--- 这一坨
})
},
ajaxDel(){
const {loading} = this;
if (loading.list) return ;
loading.list = true;
ajax.get('/list')
.then(() => {...})
.catch(() => {...})
.finally(() => {
loading.list = false;
})
}
}
};
</script>
1
John60676 2021-04-23 11:07:19 +08:00 1
☺️用第三方库来管理,例如我最近写的 [VueRequest]( https://www.attojs.com/),一个能轻松帮你管理请求状态(支持 SWR,轮询,错误重试,缓存,分页等)的 Vue 3 请求库 。
你说的 loading 内部就帮你解决了 github: https://github.com/AttoJS/vue-request |
2
kop1989 2021-04-23 11:23:14 +08:00
自己封装一个符合自己需求的 ajax 方法不就 ok 了。
|
4
lqzhgood OP |
5
christin 2021-04-23 14:21:17 +08:00 via iPhone
我看过写在拦截器里的 用 vuex 开启和关闭 loading 再加一个防抖防止多次请求中间 loading 闪烁
|