当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript请求调度与并发控制技巧

JavaScript请求调度与并发控制技巧

2025-10-03 20:14:29 0浏览收藏

在现代前端开发中，高效的JavaScript网络请求管理至关重要。本文深入探讨了**JavaScript网络请求优先级调度与并发控制方法**，旨在解决频繁请求带来的性能瓶颈和服务器压力问题。文章详细讲解了如何利用请求队列控制并发数，通过`PriorityQueue`实现请求的优先级调度，确保关键请求优先执行。同时，结合`AbortController`优雅地处理过期请求，避免资源浪费。通过这些策略，开发者可以构建一个高效、可控的请求管理器，显著提升用户体验和系统稳定性。学习本文，掌握Promise、async/await和队列机制，打造更流畅的网络应用。

通过请求队列控制并发数，使用PriorityQueue实现优先级调度，结合AbortController处理过期请求，可构建高效请求管理器。

怎样使用JavaScript进行网络请求的优先级调度与并发控制？

在现代前端开发中，频繁的网络请求可能导致性能问题或服务端压力过大。合理地进行 请求优先级调度 和 并发控制 能有效提升用户体验和系统稳定性。JavaScript 提供了多种方式来实现这些策略，结合 Promise、async/await 和队列机制即可构建可控的请求管理器。

1. 使用请求队列控制并发数

限制同时发送的请求数量是并发控制的核心。可以通过维护一个任务队列，动态控制执行中的请求数量，避免资源耗尽。

以下是一个简单的并发控制器示例：

class RequestPool {
  constructor(maxConcurrent = 3) {
    this.maxConcurrent = maxConcurrent;
    this.running = 0;
    this.queue = [];
  }

  add(requestFn) {
    return new Promise((resolve, reject) => {
      this.queue.push({
        fn: requestFn,
        resolve,
        reject
      });
      this._dequeue();
    });
  }

  async _dequeue() {
    if (this.running >= this.maxConcurrent || this.queue.length === 0) return;

    const task = this.queue.shift();
    this.running++;

    try {
      const result = await task.fn();
      task.resolve(result);
    } catch (error) {
      task.reject(error);
    } finally {
      this.running--;
      this._dequeue();
    }
  }
}

使用方式：

const pool = new RequestPool(2);

pool.add(() => fetch('/api/user/1').then(res => res.json()))
  .then(data => console.log(data));

pool.add(() => fetch('/api/user/2').then(res => res.json()));

2. 实现请求优先级调度

某些请求（如用户交互触发的）应优先于后台同步任务。可在队列中为任务添加优先级字段，高优先级任务排在前面。

修改队列的入队逻辑，按优先级排序：

class PriorityQueue {
  constructor(maxConcurrent = 3) {
    this.maxConcurrent = maxConcurrent;
    this.running = 0;
    this.queue = [];
  }

  add(requestFn, priority = 0) {
    return new Promise((resolve, reject) => {
      // 插入时按优先级降序排列（数值越大越优先）
      const task = { fn: requestFn, resolve, reject, priority };
      let inserted = false;
      for (let i = 0; i  this.queue[i].priority) {
          this.queue.splice(i, 0, task);
          inserted = true;
          break;
        }
      }
      if (!inserted) {
        this.queue.push(task);
      }
      this._dequeue();
    });
  }

  async _dequeue() {
    if (this.running >= this.maxConcurrent || this.queue.length === 0) return;
    const task = this.queue.shift();
    this.running++;

    try {
      const result = await task.fn();
      task.resolve(result);
    } catch (error) {
      task.reject(error);
    } finally {
      this.running--;
      this._dequeue();
    }
  }
}

调用时指定优先级：

const queue = new PriorityQueue(2);

// 高优先级：用户点击加载数据
queue.add(() => fetch('/api/profile').then(r => r.json()), 10);

// 低优先级：页面初始化批量拉取
queue.add(() => fetch('/api/logs').then(r => r.json()), 1);

3. 结合 AbortController 处理过期请求

当高优先级请求频繁触发时（如搜索输入），旧请求可能已无意义。可通过 AbortController 主动取消。

扩展请求函数支持中断：

function createCancelableRequest(url) {
  const controller = new AbortController();
  const promise = fetch(url, { signal: controller.signal }).then(r => r.json());
  return { promise, cancel: () => controller.abort() };
}

// 在队列中管理可取消任务（适用于防抖场景）