写一个防止重复请求接口的方法

在前端开发中，防止重复请求接口的方法通常涉及到节流（throttling）或防抖（debouncing）技术，以及对请求状态的管理。以下是一个简单的方法，通过设置一个请求锁和请求队列来防止重复发送请求：

class RequestManager {
    constructor() {
        this.isRequesting = false; // 请求锁
        this.requestQueue = []; // 请求队列
    }

    addRequest(requestFunc) {
        if (!this.isRequesting) {
            this.isRequesting = true;
            requestFunc().finally(() => {
                this.isRequesting = false;
                if (this.requestQueue.length > 0) {
                    this.processQueue();
                }
            });
        } else {
            this.requestQueue.push(requestFunc);
        }
    }

    processQueue() {
        const requestFunc = this.requestQueue.shift();
        if (requestFunc) {
            this.addRequest(requestFunc);
        }
    }
}

// 使用示例
const requestManager = new RequestManager();

// 假设我们有一个获取数据的函数fetchData，我们想防止它重复发送请求
function fetchData() {
    return fetch('/api/data').then(response => response.json());
}

// 当我们需要获取数据时，不直接调用fetchData，而是通过requestManager来调用
requestManager.addRequest(() => fetchData());

在上面的代码中，我们创建了一个RequestManager类来管理请求。addRequest方法接受一个返回Promise的请求函数作为参数。如果当前没有正在进行的请求（isRequesting为false），则立即执行该请求函数，并将isRequesting设置为true。如果请求完成（无论成功还是失败），都将isRequesting设置回false，并检查请求队列中是否有等待的请求。如果有，则处理队列中的下一个请求。

这样，即使在短时间内多次调用addRequest方法，也只有一个请求会被发送到服务器，从而防止了重复请求。其他请求会被添加到队列中，并在当前请求完成后依次处理。

请注意，这种方法主要适用于那些不应该被频繁触发的请求，例如搜索、数据加载等。对于需要实时响应的用户交互（如点击事件），可能需要使用其他方法来处理重复请求的问题。