Vue3 项目防止按钮重复点击(重复请求接口)

简介: 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>

方法虽然笨了点,但是可以完全避免重复点击情况,此方法只有第一次点击调用接口返回数据后才会被点击


相关文章
|
6天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
24 2
|
6天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
15 2
|
6天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
23 1
|
6天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
18 1
|
6天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
15 1
|
6天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
34 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
6天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
14 0
|
6天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
20 0
|
6天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
9 0
|
6天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
14 0

相关实验场景

更多