场景
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>
方法虽然笨了点，但是可以完全避免重复点击情况，此方法只有第一次点击调用接口返回数据后才会被点击
