searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

防止接口重复提交的几种方案

2024-04-25 08:55:58
171
0

什么是接口重复提交?

       接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。

防止接口重复提交的几种方式

1. 禁用提交按钮

        在用户点击提交按钮后,立即禁用该按钮,防止用户多次点击。可以在接口请求结束后重新启用按钮。

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit" id="submitButton">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为
  document.getElementById('submitButton').disabled = true; // 禁用提交按钮

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    document.getElementById('submitButton').disabled = false; // 启用提交按钮
  }).catch(function(error) {
    console.error('Error:', error);
    document.getElementById('submitButton').disabled = false; // 启用提交按钮(如果请求失败)
  });
});
</script>

2. 显示加载状态

       在用户提交表单后,显示一个加载状态的提示,告知用户正在处理请求,避免用户重复点击提交按钮。

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit" id="submitButton">提交</button>
  <div id="loadingMessage" style="display: none;">正在加载...</div>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为
  document.getElementById('submitButton').disabled = true; // 禁用提交按钮
  document.getElementById('loadingMessage').style.display = 'block'; // 显示加载状态

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    document.getElementById('submitButton').disabled = false; // 启用提交按钮
    document.getElementById('loadingMessage').style.display = 'none'; // 隐藏加载状态
  }).catch(function(error) {
    console.error('Error:', error);
    document.getElementById('submitButton').disabled = false; // 启用提交按钮(如果请求失败)
    document.getElementById('loadingMessage').style.display = 'none'; // 隐藏加载状态(如果请求失败)
  });
});
</script>

3. 设置防抖或节流

       在用户点击提交按钮后,使用防抖或节流的技术延迟发送请求,确保只发送一次请求。防抖和节流是一种常见的前端性能优化技术,可以控制函数的执行频率。

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

document.getElementById('submitButton').addEventListener('click', debounce(function() {
  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
  }).catch(function(error) {
    console.error('Error:', error);
  });
}, 1000)); // 1秒内只允许点击一次

4. 生成请求标识符

       在每次请求前生成一个唯一的请求标识符(例如 UUID),并将该标识符作为请求的一部分发送到后端。后端在接收到请求后,检查该标识符是否已经处理过,如果已经处理过则不再处理。前端可以通过记录请求标识符的状态来避免重复提交。

// 生成唯一标识符
function generateRequestId() {
  return Math.random().toString(36).substr(2, 9);
}

let requestId;

document.getElementById('submitButton').addEventListener('click', function() {
  requestId = generateRequestId(); // 生成请求标识符
  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    headers: {
      'X-Request-Id': requestId // 将请求标识符添加到请求头中
    },
    // 请求参数
  }).then(function(response) {
    // 处理响应
  }).catch(function(error) {
    console.error('Error:', error);
  });
});

5. 接口锁定

       在前端发送请求前,先检查是否存在正在处理的相同请求,如果存在则不发送新的请求。可以使用一个变量来记录当前正在处理的请求,以防止重复提交。

let isRequesting = false;

document.getElementById('submitButton').addEventListener('click', function() {
  if (isRequesting) {
    return; // 如果正在请求,则不执行后续操作
  }
  isRequesting = true; // 锁定接口

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    isRequesting = false; // 解锁接口
  }).catch(function(error) {
    console.error('Error:', error);
    isRequesting = false; // 解锁接口(如果请求失败)
  });
});
0条评论
作者已关闭评论
张****翔
4文章数
0粉丝数
张****翔
4 文章 | 0 粉丝
张****翔
4文章数
0粉丝数
张****翔
4 文章 | 0 粉丝
原创

防止接口重复提交的几种方案

2024-04-25 08:55:58
171
0

什么是接口重复提交?

       接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。

防止接口重复提交的几种方式

1. 禁用提交按钮

        在用户点击提交按钮后,立即禁用该按钮,防止用户多次点击。可以在接口请求结束后重新启用按钮。

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit" id="submitButton">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为
  document.getElementById('submitButton').disabled = true; // 禁用提交按钮

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    document.getElementById('submitButton').disabled = false; // 启用提交按钮
  }).catch(function(error) {
    console.error('Error:', error);
    document.getElementById('submitButton').disabled = false; // 启用提交按钮(如果请求失败)
  });
});
</script>

2. 显示加载状态

       在用户提交表单后,显示一个加载状态的提示,告知用户正在处理请求,避免用户重复点击提交按钮。

<form id="myForm">
  <!-- 表单内容 -->
  <button type="submit" id="submitButton">提交</button>
  <div id="loadingMessage" style="display: none;">正在加载...</div>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认提交行为
  document.getElementById('submitButton').disabled = true; // 禁用提交按钮
  document.getElementById('loadingMessage').style.display = 'block'; // 显示加载状态

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    document.getElementById('submitButton').disabled = false; // 启用提交按钮
    document.getElementById('loadingMessage').style.display = 'none'; // 隐藏加载状态
  }).catch(function(error) {
    console.error('Error:', error);
    document.getElementById('submitButton').disabled = false; // 启用提交按钮(如果请求失败)
    document.getElementById('loadingMessage').style.display = 'none'; // 隐藏加载状态(如果请求失败)
  });
});
</script>

3. 设置防抖或节流

       在用户点击提交按钮后,使用防抖或节流的技术延迟发送请求,确保只发送一次请求。防抖和节流是一种常见的前端性能优化技术,可以控制函数的执行频率。

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

document.getElementById('submitButton').addEventListener('click', debounce(function() {
  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
  }).catch(function(error) {
    console.error('Error:', error);
  });
}, 1000)); // 1秒内只允许点击一次

4. 生成请求标识符

       在每次请求前生成一个唯一的请求标识符(例如 UUID),并将该标识符作为请求的一部分发送到后端。后端在接收到请求后,检查该标识符是否已经处理过,如果已经处理过则不再处理。前端可以通过记录请求标识符的状态来避免重复提交。

// 生成唯一标识符
function generateRequestId() {
  return Math.random().toString(36).substr(2, 9);
}

let requestId;

document.getElementById('submitButton').addEventListener('click', function() {
  requestId = generateRequestId(); // 生成请求标识符
  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    headers: {
      'X-Request-Id': requestId // 将请求标识符添加到请求头中
    },
    // 请求参数
  }).then(function(response) {
    // 处理响应
  }).catch(function(error) {
    console.error('Error:', error);
  });
});

5. 接口锁定

       在前端发送请求前,先检查是否存在正在处理的相同请求,如果存在则不发送新的请求。可以使用一个变量来记录当前正在处理的请求,以防止重复提交。

let isRequesting = false;

document.getElementById('submitButton').addEventListener('click', function() {
  if (isRequesting) {
    return; // 如果正在请求,则不执行后续操作
  }
  isRequesting = true; // 锁定接口

  // 发送请求
  fetch('/api/submit', {
    method: 'POST',
    // 请求参数
  }).then(function(response) {
    // 处理响应
    isRequesting = false; // 解锁接口
  }).catch(function(error) {
    console.error('Error:', error);
    isRequesting = false; // 解锁接口(如果请求失败)
  });
});
文章来自个人专栏
前端专栏
4 文章 | 1 订阅
0条评论
作者已关闭评论
作者已关闭评论
0
0