求教axios结合throttle的写法

Question

使用场景：vue + axios, 弹窗点击按钮 > 发送请求 > 弹窗关闭，
遇到问题：连续点击按钮，在弹窗关闭前会发送多个相同的接口，
解决方案：点击时，给按钮一个disabled的标记来控制按钮

问题：

1.如果click事件挂载在div，该怎么解决（div无disabled属性）
2.考虑采用axios结合throttle的思想，如何在全局层面上改造axios

Answer 1

data() {
  return {
    requesting: false
  }
},
methods: {
  onButtonClick() {
    if (!this.requesting) {
      request().then(() => { this.requesting = false })
      
      this.requesting = true
    }
  }
}

最简单的方法，在弹框按钮回调函数里判断下是否已经发送了请求

Answer 2

要全局修改axios的话，可以参考楼上的，把请求标记requesting，存在全局状态中，如果有用vuex就存在state里面，然后通过axios的拦截器，在请求之前和请求结束后，改变requesting。

但是这种做法的话，你只能同时进行一个请求，如果遇到要同时进行两个以前的请求，就会失败。

用户体验比较好的的做法是请求的时候，弹出一个类似加载中的动画浮层，让用户无法多次点击按钮，请求结束后隐藏。