利用竞态锁解决用户重复提交问题

2024-02-15 04:12:16

前言

在前端开发中，用户可能会在短时间内连续多次提交表单或执行其他操作，这可能会导致重复请求或并发请求的问题。为了解决这个问题，我们可以使用竞态锁或 axios 拦截器来阻止或取消重复的请求。

一、竞态锁

竞态锁是一种锁机制，它可以确保在同一时刻只有一个线程或进程能够访问共享资源。在前端开发中，我们可以使用类似 useLockFn 这样的 hook或方法给请求函数添加竞态锁。当一个请求正在执行时，竞态锁会阻止其他请求的执行，直到当前请求完成。

以下是使用竞态锁解决重复提交问题的示例代码：

import { useLockFn } from 'react-use';

const useRequestLock = () => {
  const [locked, lock, unlock] = useLockFn(false);

  const makeRequest = async () => {
    if (locked()) {
      return;
    }

    lock();

    try {
      // 执行请求

    } finally {
      unlock();
    }
  };

  return makeRequest;
};

二、axios 拦截器

axios 拦截器是一种机制，它允许我们对 axios 发出的请求和收到的响应进行拦截和处理。我们可以使用 axios 拦截器来取消重复的请求。

以下是使用 axios 拦截器解决重复提交问题的示例代码：

import axios from 'axios';

const cancelTokenSource = axios.CancelToken.source();

const makeRequest = async () => {
  try {
    const response = await axios.get('/api/data', {
      cancelToken: cancelTokenSource.token,
    });

    // 处理响应

  } catch (error) {
    if (axios.isCancel(error)) {
      // 请求已被取消
    } else {
      // 其他错误
    }
  }
};

const cancelRequest = () => {
  cancelTokenSource.cancel();
};