前端拦截请求重复提交

前端

2023-10-26 21:02:29

在前端开发中，重复请求是一个常见问题。重复请求可能会导致各种问题，例如数据库中的数据不一致、用户体验不佳等。因此，防止重复请求非常重要。

重复请求的原因

重复请求通常是由以下几种原因引起的：

用户多次点击提交按钮。
网络延迟导致请求被发送了两次。
浏览器后退按钮导致请求被重新发送。

防止重复请求的方法

防止重复请求的方法有多种，其中最常用的方法是使用令牌（token）。令牌是一个随机生成的字符串，在请求时作为参数发送到服务器。服务器收到请求后，会验证令牌是否有效。如果令牌有效，则服务器会处理请求；如果令牌无效，则服务器会拒绝请求。

除了使用令牌之外，还可以使用以下方法来防止重复请求：

在提交按钮上禁用点击事件，直到服务器处理完请求。
在提交按钮上显示一个加载动画，直到服务器处理完请求。
在提交按钮上显示一个提示消息，告知用户正在处理请求。

代码演示

以下是一个使用令牌防止重复请求的代码演示：

<form id="form">
  <input type="text" name="name">
  <input type="text" name="email">
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('form');

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const token = generateToken();

    const data = new FormData(form);
    data.append('token', token);

    fetch('/submit', {
      method: 'POST',
      body: data,
    })
    .then((response) => {
      if (response.ok) {
        // 处理成功的请求
      } else {
        // 处理失败的请求
      }
    });
  });

  function generateToken() {
    // 这里使用了一个简单的随机数生成函数
    return Math.random().toString(36).substring(2, 15);
  }
</script>