vue之全局请求loading

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

页面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 = true
        setTimeout(() => {
          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参数，然后打开全局Loading
      Loading.service();
    }
    return config;
  },
  error => {
    Promise.reject(error)
  }
)

service.interceptors.response.use(res => {
    // 响应关闭Loading
    const loading = Loading.service();
    loading.close();
    return res.data;
  },
  error => {
    // 报错关闭Loading
    const loading = Loading.service();
    loading.close();
    return Promise.reject(error);
  }
)