前端代码连续点击多次按钮，导致数据提交多次，导致后端幂等，解决方案（全局 每次前端请求设置Loading加载效果，请求完成后，关闭Loading加载）

1、文章开篇：什么是幂等？

幂等（idempotent、idempotence）是一个数学与计算机学概念，常见于抽象代数中。

在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。幂等函数，或幂等方法，是指可以使用相同参数重复执行，并能获得相同结果的函数。这些函数不会影响系统状态，也不用担心重复执行会对系统造成改变。例如，“setTrue()”函数就是一个幂等函数,无论多次执行，其结果都是一样的.更复杂的操作幂等保证是利用唯一交易号(流水号)实现。

简单说：在编程中就是发多次请求，但是请求都是一样的，结果是一样的。

比如说，向数据库中新增1条数据，其实简单的来说就是设一个点击按钮，这个都没有问题，但是假如说我们向后端传输的数据有很多，页面并没有说及时得到反映，这个时候我们应该如何去处理？

其实很多前端程序员的通病就是写代码的时候不考虑代码的复用以及组件的扩展性，包括我个人也是一样，这样就会导致后期要维护的时候Bug有很多，同样代码的耦合性也会同样很高，当然这样肯定是不好的。

好的言归正传说会 幂等这个问题,如果是增加一条数据，那么前端页面肯定是会去触发一个事件，但是如果我们手抖不小心点击了两次呢？是不是就会向后端请求两次数据呢？

答案当然会，其实这就是幂等问题，包括像删除，假如说我要根据一条数据的id去删除数据，我第一次点击按钮请求时，那么数据库后端已经根据这个id去对数据库中的数据进行了操作，但是如果我在请求的过程中又点击了一次，其实这个时候如果后端再去根据这个id去更改变更数据库。仔细考虑一下，会出现什么问题呢？

当然言归正传，后端自然会有后端的处理方案，悲观锁，乐观锁，本地锁等等。

当然今天我们主要讲的就是前端如何去处理，尽量去减少后端的幂等？

1、前端怎么样去做处理？

看到这个转圈圈是不是很熟悉？
没错就是新增一个loading效果，每次当我们向后端发送请求时，新增一个转圈圈效果那不就好了么？

在这里的话我们就不讲js原生了，因为其实loading的原理就是创建一个隐藏的遮罩层，当用户点击button的时候，就把这个遮罩层展示出来，当数据已经从服务器返还回来时，就让这个遮罩层隐藏。

当然在现在基本上我们都是用ui框架的年代里，loading肯定是各个ui库都是已经给我们封装好了的，那么我们今天就来详细的介绍一下关于element的loading加载效果

2、效果

首先我们可以看一下官网给我们的案例

<template>
  <el-button
    type="primary"
    @click="openFullScreen1"
    v-loading.fullscreen.lock="fullscreenLoading">
    指令方式
  </el-button>
  <el-button
    type="primary"
    @click="openFullScreen2">
    服务方式
  </el-button>
</template>

<script>
  export default {
   
   
    data() {
   
   
      return {
   
   
        fullscreenLoading: false
      }
    },
    methods: {
   
   
      openFullScreen1() {