Ajax 请求的如何优雅的 loading

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>