Vue3 项目防止按钮重复点击（重复请求接口）

2023-07-11 1129

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue3 项目防止按钮重复点击（重复请求接口）

场景

1.保存提交按钮不小心点击了多次。

2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。

3.resize、scroll，输入框内容校验等频繁操作。

原因

由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。

解决方法 :

一.按钮禁用控制：

原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，

<template>
  <!-- 按钮 -->
  <el-button type="primary" @click="publish" :disabled="disabledFlag">添加</el-button>
</template>
<script setup>
  const disabledFlag = ref(false);
  const publish = () => {
    // 调用接口之前禁用按钮，防止多次点击调用接口
    disabledFlag.value = true;
    // 调用接口进行添加填报数据
    axios({
      method: 'post',
      url: '',
      data: qs.stringify({}),
    })
      .then((res) => {
        // 接口返回后
        disabledFlag.value = false;
        ElNotification.success({
          title: 'Success',
          message: '添加成功',
          offset: 100,
        });
      })
      .catch((err) => {
        console.log(err);
        disabledFlag.value = false;
      });
  };
</script>
<style></style>

二. loading事件等待控制：

原理：当第一次点击按钮进入事件，打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭

<template>
  <!-- 按钮 -->
  <el-button type="primary" @click="publish" :loading="loading">添加</el-button>
</template>
<script setup>
  const loading = ref(false);
  const publish = () => {
    //打开loading等待
    loading.value = true;
    // 调用接口进行添加填报数据
    axios({
      method: 'post',
      url: '',
      data: qs.stringify({}),
    })
      .then((res) => {
        // 接口返回后
        loading.value = false;
        ElNotification.success({
          title: 'Success',
          message: '添加成功',
          offset: 100,
        });
      })
      .catch((err) => {
        console.log(err);
        loading.value = false;
      });
  };
</script>