限制前端进行多次请求的方法_前端 多次访问

限制前端进行多次请求的方法

Lodash库简介：
https://blog.csdn.net/weixin_41957626/article/details/132640524

2.限制前端进行多次请求的方法

2.1采用禁用按钮的方式

禁用按钮：在发送请求之前，禁用按钮，直到请求完成后再启用它。这可以防止用户在请求进行中多次点击按钮。

当点击可确定按钮之后就对按钮进行限制点击的操作。

<template>
  <div>
    <el-button :disabled="loading" @click="sendRequest">发送请求</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false, // 控制按钮状态
    };
  },
  methods: {
    async sendRequest() {
      this.loading = true; // 禁用按钮
      try {
        // 发送请求
        await yourApiRequestFunction();
        // 请求成功后，启用按钮
      } catch (error) {
        // 处理错误情况
      } finally {
        this.loading = false; // 请求完成后，启用按钮
      }
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.2采用防抖函数的操作

亲测这个是不错的

使用防抖或节流：防抖和节流是一种控制函数执行频率的技术。你可以使用 lodash 库中的 debounce 或 throttle 函数，以确保按钮点击事件在一定的时间间隔内只会触发一次请求。

<template>
  <div>
    <el-button @click="debouncedSendRequest">发送请求</el-button>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  methods: {
    debouncedSendRequest: debounce(async function() {
      try {
        // 发送请求
        await yourApiRequestFunction();
      } catch (error) {
        // 处理错误情况
      }
    }, 1000), // 1000 毫秒的防抖间隔
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23