接口雪崩？页面卡死？前端工程师的并发请求优化实战指南

原创已于 2025-09-14 19:58:38 修改 · 882 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-09-12 22:06:32 首次发布

前端工程化专栏收录该内容

11 篇文章

订阅专栏

😉 你好呀，我是爱编程的Sherry，专注前端实战。平时会把实战里的技术坑、解决方案和学习笔记，整理成带代码、好理解的文章，帮你少走弯路。如果你在学前端或被技术问题卡壳，欢迎关注我，后续会持续更干货，评论区也会及时回复你的问题～

在现代Web应用中，前端页面往往需要同时发起多个接口请求来获取数据。然而，当这些请求并发量过大时，轻则导致页面卡顿、响应延迟，重则引发接口超时、服务器压力激增，甚至造成服务不可用。作为一名前端开发工程师，你是否遇到过以下场景？

问题场景：

某电商后台管理系统首页，需要同时加载用户信息、订单列表、商品统计、物流状态、优惠券数据等10+个接口。页面一打开，浏览器DevTools中瞬间出现十几条pending的请求，页面长时间白屏，用户抱怨“卡死了”。更严重的是，后端监控报警：大量请求超时，数据库连接池被打满。

这正是典型的前端大规模并发请求问题。本文将带你深入剖析其成因，结合技术解析与实战代码，提供一套完整的解决方案，并附上避坑指南，助你从容应对高并发场景。

一、技术解析：并发问题的根源

前端并发请求的问题，主要体现在三个方面：

1. 浏览器并发限制

浏览器对同一域名下的并发请求数有限制（通常为6个）。超过的请求会被阻塞排队，形成“队头阻塞”，导致后续请求延迟。

2. 服务器压力过大

短时间内大量请求涌入，后端服务可能无法及时处理，引发超时、降级或崩溃。

3. 前端资源消耗过高

大量异步请求占用主线程资源，影响页面渲染和交互响应，用户体验极差。

因此，盲目并发不可取，合理控制并发才是关键。

二、实战代码：基于Promise的并发请求控制器

我们可以通过封装一个ConcurrentRequestController类，实现对并发请求数量的精确控制。

1. 核心思路

维护一个请求队列。
设置最大并发数（如 maxConcurrent = 5）。
使用 Promise 控制执行流程，当有请求完成时，自动从队列中取出下一个请求执行。

class ConcurrentRequestController {
  constructor(maxConcurrent = 5) {
    this.maxConcurrent = maxConcurrent; // 最大并发数
    this.runningCount = 0;              // 当前正在执行的请求数
    this.queue = [];                    // 请求队列
  }

  // 添加请求
  add(requestPromiseFn) {
    return new Promise((resolve, reject) => {
      this.queue.push({
        promiseFn: requestPromiseFn,
        resolve,
        reject
      });
      this._run();
    });
  }

  // 执行请求（核心逻辑）
  _run() {
    if (this.runningCount >= this.maxConcurrent || this.queue.length === 0) {
      return;
    }

    const item = this.queue.shift();
    this.runningCount++;

    // 执行请求
    item.promiseFn()
      .then(res => {
        item.resolve(res);
      })
      .catch(err => {
        item.reject(err);
      })
      .finally(() => {
        this.runningCount--;
        this._run(); // 执行完一个，继续执行下一个
      });
  }
}

2. 使用示例

假设我们有多个接口请求函数（返回Promise）：

// 模拟接口请求
const fetchUser = () => fetch('/api/user').then(r => r.json());
const fetchOrders = () => fetch('/api/orders').then(r => r.json());
const fetchProducts = () => fetch('/api/products').then(r => r.json());
// ... 其他请求

// 创建控制器，限制最大并发为3
const controller = new ConcurrentRequestController(3);

// 并发执行所有请求，但最多同时3个
Promise.all([
  controller.add(fetchUser),
  controller.add(fetchOrders),
  controller.add(fetchProducts),
  // ... 添加更多请求
])
.then(results => {
  console.log('所有请求完成:', results);
  // 更新页面数据
})
.catch(err => {
  console.error('请求失败:', err);
});