JS前端并发多个相同的请求控制为只发一个请求方式

JS前端并发多个相同的请求时，由于后端可能要对请求做一些处理和计算，重复的请求将会对系统造成一定的负担和影响响应速度。因此，需要控制多个相同请求只发送一个请求的方式，以提高页面性能和后端服务的质量。下面是可能的解决方案：

1. 建立请求队列

可以通过建立请求队列，将所有重复的请求都放到队列中，然后只发出队列里的第一个请求。接着，在请求的回调中，从队列中移除发出的请求并尝试发送队列中的下一个请求。这种方式可以控制同时只有一个请求同时发送，而避免连续发送多个相同的请求，从而达到减轻后端负担的目的。

示例1：使用Promise实现请求队列

let queue = []; // 消息队列

function fetch(url) {
    let promise = new Promise((resolve, reject) => {
        // 发送请求
        $.ajax({
            url: url,
            type: "GET",
            success: resolve,
            error: reject
        });
    });
    queue.push(promise); // 将请求放到消息队列中
    let len = queue.length;
    if (len === 1) {
        // 若队列长度为1，则说明当前没有请求，可以直接发送
        queue[0].finally(() => {
            // 无论请求结果如何，都要尝试发送下一个请求
            queue.shift();
            if (queue.length > 0) {
                sendRequest(queue[0]);
            }
        });
        return sendRequest(queue[0]);
    }
    return promise;
}

function sendRequest(promise) {
    // 发送请求
    return promise.finally(() => {
        // 无论请求结果如何，都要尝试发送下一个请求
        queue.shift();
        if (queue.length > 0) {
            sendRequest(queue[0]);
        }
    });
}

// 调用示例
fetch('/api/data');
fetch('/api/data');
fetch('/api/data');

示例2：使用async/await实现请求队列

let queue = []; // 消息队列
let loading = false; // 当前是否正在发送请求

async function fetch(url) {
    let promise = new Promise((resolve, reject) => {
        // 发送请求
        $.ajax({
            url: url,
            type: "GET",
            success: resolve,
            error: reject
        });
    });
    queue.push(promise); // 将请求放到消息队列中
    if (loading) {
        // 如果当前正在发送请求，则直接返回promise对象
        return promise;
    }
    try {
        loading = true;
        while (queue.length > 0) {
            // 只发送队列中的第一个请求
            await queue[0];
            queue.shift(); // 将已完成的请求从队列中移除
        }
        return Promise.resolve();
    } catch (error) {
        return Promise.reject(error);
    } finally {
        loading = false;
    }
}

// 调用示例
fetch('/api/data');
fetch('/api/data');
fetch('/api/data');

2. 防抖和节流

防抖和节流是常用的解决控制多个请求的方法。当频繁地触发事件时，通过防抖或节流控制事件响应的频率，将多个相同的请求合并成一个请求。防抖保证在一段时间之后才发送请求，而节流则保证只在固定时间间隔内才发送请求。

示例3：防抖

function debounce(fn, delay) {
    let timer = null;
    return function () {
        let context = this;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(context, arguments);
        }, delay);
    }
}

// 调用示例
let sendRequest = debounce(function () {
    $.ajax({
        url: '/api/data',
        type: 'GET',
        success: function (response) {
            console.log(response);
        }
    });
}, 1000);

sendRequest(); // 这里只发送了一个请求
sendRequest(); // 将上一个请求取消，重新开始计时
sendRequest(); // 将上一个请求取消，重新开始计时

示例4：节流

function throttle(fn, interval) {
    let last = 0;
    return function () {
        let context = this;
        let now = +new Date();
        if (now - last > interval) {
            last = now;
            fn.apply(context, arguments);
        }
    }
}

// 调用示例
let sendRequest = throttle(function () {
    $.ajax({
        url: '/api/data',
        type: 'GET',
        success: function (response) {
            console.log(response);
        }
    });
}, 1000);

sendRequest(); // 这里只发送了一个请求
// 一定时间内，即使多次调用函数，也只发送一次请求
setTimeout(() => {
    sendRequest();
    sendRequest();
    sendRequest();
}, 500);