使用 Vue 自定义指令和 Axios 解决 POST 请求重 | 多次post请求，提示重复提交，并且控制台输出错误：“接口undefined”

问题背景

在开发中遇到一个问题，是用el-button标签，给点击事件绑定一个方法，这个方法会以组件中的响应式数据作为参数，发送一个post请求。

客户端axios库在多次post请求，提示重复提交，并且控制台输出错误：“接口undefined”

问题分析

可以从以下三个角度来解决问题

1. 使用get请求，通过观察，get请求不会有这样的问题
2. 使用节流函数，控制固定时间内只能触发一次post请求。
3. 使用自定义指令，并且结合节流函数，控制dom的点击事件在固定时间内只触发一次。

解决方法

我使用了如下的解决方法

设置一个v-throttle自定义指令来解决表单防止重复提交这种情况 代码如下

// 1.设置v-throttle自定义指令。
Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 节流时间
    if (!throttleTime) { // 用户若不设置节流时间，则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>

小结

在这个问题中，依然存在以下未理解的知识，我以问题的形式抛出

1. 为什么短时间内请求两次post请求就会出错？
2. 在这个事件中，axios库中使用post请求多次，为什么会在控制台有接口undefined的error输出？
3. get和post的区别是什么？

这个问题或许可以作为面对面试官的get和post的区别问题从一个在工作中实际应用作为得分点来回答。