并发请求控制

• 如大文件上传，切片上传，需要支持几个并发同时上传，由于一个一个上传太慢了，也不能全部一起上传会太卡
  • 大文件上传通常会将文件分成多个切片，然后并发上传这些切片以提高速度。但如果并发数太多，可能会造成浏览器或服务器压力过大，所以需要合理控制并发数
  • 浏览器是有并发限制的，一次性只允许发送6个请求，如果一次性发送100个请求，肯定会造成卡顿

实现逻辑

• 1、维护一个队列
• 2、控制并发请求数量，当一个请求完成后再启动下一个，下一个进行补位

js

let currentIndex = 0; // 当前任务指针，指向下一个要上传的任务
let activeUploads = 0; // 当前正在上传的任务数

const startNextUpload = async () => {
  // 1️⃣ 队列结束条件
  if (currentIndex >= uploadQueue.length && activeUploads === 0) {
    uploading.value = false; // 所有任务上传完毕
    disabledUpload.value = false;
    onComplete?.(); // 回调通知完成
    return;
  }

  // 2️⃣ 在并发数未达上限 且 队列中仍有任务时，启动新的上传任务
  while (activeUploads < batchSize && currentIndex < uploadQueue.length) {
    const item = uploadQueue[currentIndex]; // 拿到下一个上传任务
    currentIndex++;
    activeUploads++; // 记录一个任务开始上传

    // 3️⃣ 上传逻辑（Promise）
    ossUpload(item)
      .then(() => {
        // 单个任务上传成功
        activeUploads--; // 当前活跃任务数减少
        startNextUpload(); // 递归启动新的任务（保持通道数量）
      })
      .catch(() => {
        // 单个任务失败，也要释放通道并继续
        activeUploads--;
        startNextUpload();
      });
  }
};

// 启动上传流程
await startNextUpload();

第三方库

• p-limit
  • 允许你设置最大并发数，确保在任何时刻只会有指定数量的任务同时执行。这对于防止资源耗尽或过载非常有用
  • 适合简单的任务管理，主要关注并发数的限制，不涉及任务的优先级或顺序
• p-queue
  • 提供了一个队列机制，允许你控制任务的执行顺序，并且可以设置并发数。它确保任务按照添加的顺序执行，适合需要顺序处理的场景
  • 提供了更复杂的任务管理功能，包括任务优先级、取消任务等，适合需要更高控制力的场景
• p-throttle
  • 通过限制在特定时间段内执行的任务数量来控制速率，确保不会超过设定的阈值。这在处理需要遵循速率限制的 API 请求时特别有效
  • 主要关注任务的执行速率，而不是任务的顺序或优先级，适合需要控制速率的场景