Ajax 请求的如何优雅的 loading

[lqzhgood]

Ajax 请求前总是要需要一个 loading 变量来

• 防止重复点击
• 开启 loading 效果

那么这个 loading 的最佳实践是啥？ 每一个 Ajax 都要写一个 loading， 感觉每次重复写很蛋疼,

• 并不能用 axios 的全局拦截器，那样只能全局 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> 

[John60676]

☺️用第三方库来管理，例如我最近写的 [VueRequest]( https://www.attojs.com/)，一个能轻松帮你管理请求状态（支持 SWR，轮询，错误重试，缓存，分页等）的 Vue 3 请求库 。

你说的 loading 内部就帮你解决了

github: https://github.com/AttoJS/vue-request

[kop1989]

自己封装一个符合自己需求的 ajax 方法不就 ok 了。

[lqzhgood]

@John60676 3Q 我试试~

[lqzhgood]

@kop1989 当然得封装， 关键是封装的最佳实践是啥咯~

loading 状态需要写两次，如果把 loading 做对象整个做入参又很别扭

[christin]

我看过写在拦截器里的 用 vuex 开启和关闭 loading 再加一个防抖防止多次请求中间 loading 闪烁

[lqzhgood]

@christin 全局的 loading 用 vuex 处理没关系~
页面上面的局部 loading 用 vuex 就不合适了。