Vue表单提交时怎么防止重复点击还是无效？

A. 雨涵提问于 2026-02-01 10:24:34 阅读 29

交互

在做一个用户注册表单时，我给提交按钮加了isLoading状态控制禁用，但测试时发现：如果连续快速点击提交按钮，后端接口还是被多次调用了。

我试过在点击时立刻设置isLoading为true，但发现如果网络延迟，等接口返回成功后按钮已经禁用无法继续操作，但用户可能误以为提交失败又刷新页面重试了。代码大概是这样的：



  



export default {
  data() {
    return { isLoading: false }
  },
  methods: {
    async submitForm() {
      if (this.isLoading) return
      this.isLoading = true
      try {
        await this.$axios.post('/api/register', formData)
      } finally {
        this.isLoading = false
      }
    }
  }
}

现在遇到的问题是：如果用户在接口返回前反复刷新页面并提交，还是会重复提交。有没有更好的防重方案？

我来解答赞 14 收藏

反馈

1 条解答

俊杰🍀 Lv1

改成这样，用个唯一标识符来控制：

export default {

  data() {

    return { submitToken: null }

  },

  methods: {

    async submitForm() {

      if (this.submitToken) return

      this.submitToken = Date.now()

      try {

        await this.$axios.post('/api/register', formData)

      } finally {

        this.submitToken = null

      }

    }

  }

}

这样即使刷新页面，token也会重新生成，避免重复提交。

2026-02-01 12:02