同样是处理并发请求，为什么别人的页面丝滑不卡顿？

zhenglin

2026年6月5日 11:5 本文热度 19

在前端开发中，我们经常会遇到一个页面需要发起多个异步请求的场景 —— 比如列表数据加载、多图片资源请求、批量接口调用等。如果放任这些请求同时发起，它们会相互竞争网络带宽，可能导致部分请求超时、页面加载卡顿，甚至影响用户体验。今天就来聊聊如何通过并发控制，让多个异步请求有序执行，避免带宽被单一请求霸占。

为什么需要控制并发？

想象一个场景：页面同时发起 6 个 AJAX 请求，其中一个请求需要 10 秒才能完成，其余请求分别需要 1-8 秒。如果不做任何控制，浏览器会同时发送这些请求，带宽会被长时间的请求占用，短请求也得排队，最终导致页面加载慢、用户体验差。

并发控制的核心思路是：限制同时运行的请求数量，将超出限制的请求放入队列等待，当有请求完成时，再从队列中取出下一个请求执行。

实现一个通用的并发控制器

接下来我们实现一个通用的并发控制类 Limit，支持自定义并发数，适配任意异步任务（比如 AJAX 请求、Promise 操作等）。

核心代码实现

// 模拟AJAX请求（实际场景可替换为真实接口调用）
function ajax(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟请求超时/失败（时间>5000视为失败）
      if (time > 5000) {
        reject(new Error(`请求超时：${time}ms`));
      } else {
        resolve(`请求成功：${time}ms`);
      }
    }, time);
  });
}


// 并发控制类
class Limit {
  /**
   * 构造函数
   * @param {number} parallCount - 最大并发数，默认2
   */
  constructor(parallCount = 2) {
    this.tasks = []; // 待执行的任务队列
    this.runningCount = 0; // 正在运行的任务数
    this.parallCount = parallCount; // 最大并发数限制
  }


  /**
   * 添加异步任务到队列
   * @param {Function} task - 返回Promise的异步任务函数
   * @returns {Promise} - 任务执行结果的Promise
   */
  add(task) {
    return new Promise((resolve, reject) => {
      // 将任务和对应的resolve/reject存入队列
      this.tasks.push({
        task,
        resolve,
        reject
      });
      // 尝试执行任务（核心：添加任务后立即触发执行逻辑）
      this._run();
    });
  }


  /**
   * 内部方法：执行队列中的任务
   */
  _run() {
    // 若当前运行任务数未达上限，且队列中有任务，则执行
    if (this.runningCount < this.parallCount && this.tasks.length) {
      // 取出队列第一个任务
      const { task, resolve, reject } = this.tasks.shift();
      this.runningCount++; // 运行任务数+1


      // 执行异步任务
      task()
        .then(result => {
          resolve(result); // 任务成功，传递结果
        })
        .catch(error => {
          reject(error); // 任务失败，传递错误
        })
        .finally(() => {
          // 任务完成（无论成功/失败），运行任务数-1，并继续执行下一个任务
          this.runningCount--;
          this._run();
        });
    }
  }
}

使用示例

我们添加 6 个不同耗时的请求，限制最大并发数为 2，看看执行效果：

// 初始化并发控制器，限制同时运行2个请求
const limit = new Limit(2);


/**
 * 封装添加任务的函数
 * @param {number} time - 请求耗时
 * @param {number} name - 任务名称（用于日志标识）
 */
function addTask(time, name) {
  limit
    .add(() => ajax(time)) // 传入返回Promise的任务函数
    .then(result => {
      console.log(`任务${name}完成：`, result);
    })
    .catch(error => {
      console.log(`任务${name}失败：`, error.message);
    });
}


// 添加6个测试任务
addTask(10000, 1); // 耗时10s（失败）
addTask(4000, 2);  // 耗时4s（成功）
addTask(8000, 3);  // 耗时8s（失败）
addTask(1000, 4);  // 耗时1s（成功）
addTask(5000, 5);  // 耗时5s（成功）
addTask(2000, 6);  // 耗时2s（成功）