大厂面试经(二)：前端请求如何将多次提交压缩成一次提交？

代码简单说

发布于 2026-06-16 16:07:48

630

文章被收录于专栏：代码简单说代码简单说

大厂面试经(二)：前端请求如何将多次提交压缩成一次提交？

tag：前端防抖 | 请求合并 | Vue | 面试题 | 高级优化

“你知道在用户频繁点击按钮时，怎么把这些请求压缩成一次提交吗？” 面试官盯着我，轻轻点了点桌面。我知道，这道题不止考防抖，它想要的，是架构级的思考方式。

🧠 我踩过的一个“高频点击”坑

有一次做一个后台运营功能，页面上有个“批量发布”按钮。用户在点击时，会发起一个 API 请求，把选中的文章一键发布。

结果上线后发现，有运营同事习惯性猛点按钮……短短几秒钟，服务器收到十几个重复请求，导致文章被重复推送，还顺带炸了个 Redis 队列。

当时我用了节流+disabled 的土办法解决了问题。但直到有天面试被问到“如何把多次点击合并成一次请求”，我才意识到：节流只是权宜之计，要真正优雅地处理这种情况，得升维思考。

🚀 把“防抖节流”升维成“请求合并”

大多数人会想到节流（throttle）或防抖（debounce）：

const submit = debounce(() => {
  api.post('/submit', data);
}, 500);

但面试官真正想听到的，不是这一行代码，而是为什么这样做，以及还有没有更优解。

于是我在项目里逐步尝试了几种方式，每一步都更抽象、更通用。

💡 解法一：最基础的防抖/节流（适合用户主动操作）

适用于输入框搜索、按钮点击。比如：

const submitForm = debounce(() => {
  axios.post('/submit', getFormData());
}, 800);

优点是简单直观，缺点是粒度太细，不适合组件通信或高频场景。

💡 解法二：基于请求缓存的“合并机制”（适合并发场景）

这是我后来面试讲到的重点方案，很多人没讲到这里，面试官就已经开始点头了。

核心思路：

用户每次点击不会立即请求，而是将请求参数加入一个“队列”；
设置一个定时器，几百毫秒后统一发一次请求；
发请求时将“所有参数”打包；
服务端返回后统一响应。

封装代码如下：

// 单例请求管理器
class RequestMerger {
  constructor() {
    this.queue = [];
    this.timer = null;
  }

  enqueue(data) {
    this.queue.push(data);
    if (!this.timer) {
      this.timer = setTimeout(() => {
        this.flush();
      }, 300); // 合并时间窗口
    }
  }

  flush() {
    const merged = [...this.queue];
    this.queue = [];
    this.timer = null;

    axios.post('/api/submit', merged)
      .then(res => {
        // TODO: 回调处理
      });
  }
}

// 使用方式
const merger = new RequestMerger();

function onClickSubmit(itemData) {
  merger.enqueue(itemData);
}

这个设计和“打包发货”很像：每次有人下单就放进筐里，过几百毫秒统一寄出。

💡 解法三：全局事件代理 + 请求合并（适合多个组件并发）

如果你的场景是多个组件或模块在几乎同时提交请求，比如：

多个子表单
多个异步上传操作
多个模块内部统一处理

你可以用事件总线或全局管理器封装：

// submitBus.js
const listeners = [];
let timer = null;
let queue = [];

export function submitData(data) {
  queue.push(data);

  if (!timer) {
    timer = setTimeout(() => {
      const toSubmit = [...queue];
      queue = [];
      timer = null;

      axios.post('/api/mergeSubmit', toSubmit).then(res => {
        listeners.forEach(cb => cb(res));
      });
    }, 200);
  }
}

export function onResponse(cb) {
  listeners.push(cb);
}