客户端请求队列堆积怎么处理（进阶教程）

你有没有遇到过这种情况：手机App点一下没反应，再点一下又卡住，后台一看，一堆请求堆在那儿不动弹。这其实就是客户端请求队列堆积了。说白了，就是发出去的请求太多，服务器处理不过来，或者网络慢，导致请求排起了长队。

为啥会堆积？先搞清楚源头

最常见的原因是网络不稳定。比如你在地铁里刷购物App，信号时断时续，请求发不出去，系统就会把它们先存进队列，等网络恢复再发。可如果这时候你不停地点“下单”“刷新”，新请求一个接一个进来，老的还没走，新的又来，队列就越堆越高。

另一个情况是服务器压力大。大促期间，电商平台瞬间涌入百万请求，服务器处理不过来，响应变慢，客户端等不到回信，就开始重试，结果就是雪上加霜。

怎么解决？几个实用办法

第一招：限制并发数量。别让所有请求一股脑冲出去。可以设置最多同时发5个请求，其他的先排队。这样既能保证效率，又不会压垮服务器。

const MAX_CONCURRENT = 5;
let activeRequests = 0;
const queue = [];

function sendRequest(request) {
  if (activeRequests < MAX_CONCURRENT) {
    execute(request);
  } else {
    queue.push(request);
  }
}

function execute(req) {
  activeRequests++;
  req().finally(() => {
    activeRequests--;
    if (queue.length > 0) {
      sendRequest(queue.shift());
    }
  });
}

第二招：设置超时和重试上限。请求卡住太久，干脆放弃。比如一个请求等了10秒还没回，就直接标记失败，别让它一直占着位置。重试也别无脑来，最多试两次，再不行就提示用户检查网络。

第三招：优先级调度。不是所有请求都一样重要。比如你在一个笔记App里，同步历史笔记可以慢点，但保存当前正在写的这条，必须优先发出去。给请求分个轻重缓急，用户体验立马不一样。

前端也能帮忙缓解

用户连点问题很常见。点一次按钮，开发者没做防抖，用户手一抖点了三下，就发出三个重复请求。加上防抖或节流，能有效减少无效请求入队。

let timer;
function debounce(func, delay) {
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const submitOrder = debounce(() => {
  // 发送下单请求
}, 800);

还有就是及时清理。有些请求其实已经没用了，比如你快速切换页面，前一个页面的数据还在加载，这时候就应该主动取消，别让它继续占着队列。

队列堆积不是大病，但挺烦人。合理控制并发、设置超时、区分优先级，再加点前端小技巧，基本就能搞定。”}