vue 防止request重复提交

在Vue.js应用中，防止表单请求的重复提交是一个常见的问题，因为用户可能会意外地连续点击按钮导致多次请求发送。这里有一些常用的方法来解决这个问题：

1. **v-model 和 submit 指令**: 使用`<form>`元素的`@submit.prevent="handleSubmit"`事件处理器，阻止默认的表单提交行为，并使用`v-model`双向绑定来控制提交状态。当用户点击提交按钮时，只有在状态允许的情况下才会触发实际的请求。

<form @submit.prevent="handleSubmit">
  <input v-model="isSubmitting" type="hidden" value="false">
  <!-- ... -->
</form>

<script>
export default {
  data() {
    return {
      isSubmitting: false,
      // ...其他数据
    };
  },
  methods: {
    handleSubmit() {
      if (!this.isSubmitting) { // 如果不是正在提交
        this.isSubmitting = true; // 设置为提交中
        // 发送请求
        axios.post('/api', ...)
          .then(() => {
            this.isSubmitting = false; // 请求成功后恢复状态
          })
          .catch((error) => {
            // 错误处理...
            this.isSubmitting = false;
          });
      }
    }
  }
};
</script>

2. **官方的v-loading指令**: Vue官方提供了`v-loading`指令来管理加载状态，结合上一种方法，可以在发送请求前显示加载提示，在请求完成后隐藏它。

3. **第三方库如vue-router的beforeRouteUpdate钩子**：如果是在组件路由切换过程中避免重复提交，可以利用这个钩子判断当前是否已经发起请求。

4. **Promise.cancel机制（仅适用于axios等支持取消的库）**: 对于正在进行的异步请求，你可以添加一个取消函数，当需要停止请求时就调用它。

**相关问题--:**
1. 使用`v-model`如何优雅地展示请求状态给用户？
2. `axios`取消请求通常怎么做？
3. 是否有其他的防重复提交策略可以考虑？