JS如何实现请求合并

setTimeout

/**
 * @typedef {Object} BatchRequestItem
 * @property {any} data - 单个请求的数据
 * @property {(value: any) => void} resolve - 对应Promise的resolve函数
 * @property {(reason?: any) => void} reject - 对应Promise的reject函数
 */

// 存储不同URL的请求队列和定时器
const requestQueues = new Map(); // Key: URL, Value: { queue: BatchRequestItem[], timerId: number | null }

/**
 * 通用的请求合并函数
 * @param {string} url - 请求的URL
 * @param {any} requestData - 单个请求需要发送的数据
 * @param {Object} [options] - 配置选项
 * @param {number} [options.delay=100] - 合并请求的延迟时间（毫秒）
 * @param {number} [options.maxBatchSize=10] - 最大批处理数量
 * @returns {Promise<any>} - 返回一个Promise，解析为单个请求的结果
 */
function batchFetch(url, requestData, options = {}) {
    const { delay = 100, maxBatchSize = 10 } = options;

    // 获取或初始化当前URL的队列和定时器
    let { queue, timerId } = requestQueues.get(url) || { queue: [], timerId: null };
    requestQueues.set(url, { queue, timerId }); // 确保Map中存在

    return new Promise((resolve, reject) => {
        // 将当前请求及其Promise的resolve/reject函数加入队列
        queue.push({ data: requestData, resolve, reject });

        // 如果队列达到最大数量，立即触发发送
        if (queue.length >= maxBatchSize) {
            clearTimeout(timerId); // 清除现有定时器，立即处理
            requestQueues.set(url, { queue: [], timerId: null }); // 清空队列并重置定时器
            sendBatchRequest(url, queue);
            return; // 立即返回，不再设置定时器
        }

        // 如果没有定时器，或者定时器已经过期，设置新的定时器
        if (timerId === null) {
            timerId = setTimeout(() => {
                // 定时器触发时，取出当前URL的所有待处理请求
                const currentQueueData = requestQueues.get(url);
                if (currentQueueData && currentQueueData.queue.length > 0) {
                    // 清空队列并重置定时器
                    requestQueues.set(url, { queue: [], timerId: null });
                    sendBatchRequest(url, currentQueueData.queue);
                }
            }, delay);
            requestQueues.set(url, { queue, timerId }); // 更新Map中的timerId
        }
    });
}

/**
 * 实际发送合并请求的内部函数
 * @param {string} url - 请求的URL
 * @param {BatchRequestItem[]} items - 待处理的请求项数组
 */
async function sendBatchRequest(url, items) {
    if (items.length === 0) {
        return;
    }

    // 提取所有请求的数据，准备发送
    const batchedPayload = items.map(item => item.data);

    try {
        // 假设后端有一个 /batch 接口，接收一个数组，返回一个数组
        // 这里只是一个示意，实际的合并请求体和响应格式需要前后端约定
        const response = await fetch(url, {
            method: 'POST', // 批量请求通常是POST
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(batchedPayload),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const results = await response.json(); // 假设返回的是一个结果数组

        // 遍历原始请求项，将结果分发给对应的Promise
        items.forEach((item, index) => {
            // 这里需要根据后端返回的结构来判断哪个结果对应哪个原始请求
            // 简单示例：假设返回结果数组的顺序与请求数组顺序一致
            const result = results[index];
            if (result && result.success) { // 假设每个子结果有 success 标志
                item.resolve(result.data);
            } else {
                item.reject(result ? result.error : new Error('Unknown batch error'));
            }
        });

    } catch (error) {
        // 批处理请求失败，所有原始请求都应该被拒绝
        items.forEach(item => item.reject(error));
    }
}

// 示例用法：
// 假设后端有一个 /api/user 接口，支持批量查询用户，传入一个ID数组，返回用户对象数组
// 实际使用时，你需要根据你的后端接口调整 sendBatchRequest 内部的逻辑
/*
// 模拟用户快速点击或输入，触发多个请求
batchFetch('/api/user', { id: 1 }).then(user => console.log('User 1:', user)).catch(e => console.error(e));
batchFetch('/api/user', { id: 2 }).then(user => console.log('User 2:', user)).catch(e => console.error(e));
batchFetch('/api/user', { id: 3 }).then(user => console.log('User 3:', user)).catch(e => console.error(e));

setTimeout(() => {
    batchFetch('/api/user', { id: 4 }).then(user => console.log('User 4:', user)).catch(e => console.error(e));
}, 50); // 50ms 后再次触发，可能和前3个合并
setTimeout(() => {
    batchFetch('/api/user', { id: 5 }).then(user => console.log('User 5:', user)).catch(e => console.error(e));
}, 120); // 120ms 后触发，可能已经错过了第一个批次，形成新的批次
*/

这个设计，用 `Map` 来存储每个 URL 对应的请求队列和定时器，确保不同接口的请求可以独立合并。`sendBatchRequest` 函数是核心，它负责将队列中的数据整合成一个请求体发送，并根据响应将结果分发回每个独立的 `Promise`。当然，实际生产环境中，你可能还需要考虑请求的 `method`、`headers` 等差异，以及更复杂的后端响应结构解析。但这个基础框架，足以让你开始构建自己的请求合并逻辑了。