场景：我们往往在项目中会因为表单重复提交而烦恼，往往都会想到很高大上的两个词语——防抖、节流。但网上的很多方法都还是不够灵活、通用，那么下面介绍一下我的方法（在最后）

页面loading

往往都是一个页面写一堆loading代码，请求前打开loading，等请求后关闭，这样会造成代码过度冗余，写起来非常的~你懂得

export default {submit() {this.loading = true;addInfo(this.form).then(res => {this.data = res.data;this.loading = false;}).catch (e) {this.loading = false;};}
}

Vue指令

另一种方法就是写一个vue指令，绑定到按钮上然后定时给按钮添加loading或禁用，缺点也很明显，直接写到组件上造成维护性太低，并且loading和请求没有太大关系。

Vue.directive('prevent', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 2000)}})}
});

全局请求loading

很多人都尝试将loading与组件关联起来，但其实loading与请求结合才是根本，所以何尝不在axios中做一下手脚呢。
我们可以利用axios的前置和后置拦截完成loading显示和关闭。

import axios from 'axios'
import {Loading} from 'element-ui'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 100000
});service.interceptors.request.use(config => {if (config.loading) {// 判断loading参数，然后打开全局LoadingLoading.service();}return config;},error => {Promise.reject(error)}
)service.interceptors.response.use(res => {// 响应关闭Loadingconst loading = Loading.service();loading.close();return res.data;},error => {// 报错关闭Loadingconst loading = Loading.service();loading.close();return Promise.reject(error);}
)