如何限制Angular中WebWorker的并发请求数量？

WebWorker本身不会直接管控请求并发数，浏览器默认的HTTP并发限制（通常6个）是底层机制，但我们可以在WebWorker内部通过队列控制逻辑主动把并发请求数限制为3，完全不用依赖前端固定间隔的临时方案，更灵活高效。

方案一：基于请求队列的动态并发控制（推荐） #

这种方式会维护一个待上传文件队列，只要当前正在运行的请求数小于3，就从队列中取出文件发起请求；任意请求完成（成功/失败）后，立刻补充下一个请求，最大化利用并发能力同时不超过限制。

在你的WebWorker文件（比如upload.worker.ts）中实现如下逻辑：

let currentConcurrent = 0;
const uploadQueue = [];
const MAX_CONCURRENT = 3;

// 处理队列的核心函数
function processQueue() {
  // 循环判断：还有空位且队列不为空，就继续发起请求
  while (currentConcurrent < MAX_CONCURRENT && uploadQueue.length > 0) {
    const file = uploadQueue.shift();
    currentConcurrent++;
    
    // 发起上传请求（替换成你的后端接口）
    fetch('/your-upload-api', {
      method: 'POST',
      body: new FormData().append('file', file)
    })
    .then(response => {
      // 可选：给主线程发送上传成功的消息
      self.postMessage({ type: 'success', fileId: file.name });
      return response.json();
    })
    .catch(err => {
      // 可选：给主线程发送上传失败的消息
      self.postMessage({ type: 'error', fileId: file.name, error: err.message });
    })
    .finally(() => {
      currentConcurrent--;
      processQueue(); // 请求结束后，立刻尝试处理下一个队列任务
    });
  }
}

// 接收主线程传来的文件列表
self.onmessage = (e) => {
  if (e.data.type === 'start-upload') {
    uploadQueue.push(...e.data.files);
    processQueue(); // 启动队列处理
  }
};

方案二：分批串行上传（简单易实现） #

如果不需要动态补位的高效性，也可以把文件列表分成每3个一组，每组全部上传完成后再处理下一组。这种方式逻辑更简单，但整体上传耗时会略长。

WebWorker内的实现代码：

async function batchUpload(files) {
  const BATCH_SIZE = 3;
  for (let i = 0; i < files.length; i += BATCH_SIZE) {
    const currentBatch = files.slice(i, i + BATCH_SIZE);
    // 等待当前批次所有请求完成
    await Promise.all(
      currentBatch.map(file => 
        fetch('/your-upload-api', {
          method: 'POST',
          body: new FormData().append('file', file)
        })
        .then(res => {
          self.postMessage({ type: 'success', fileId: file.name });
          return res.json();
        })
        .catch(err => {
          self.postMessage({ type: 'error', fileId: file.name, error: err.message });
        })
      )
    );
  }
  // 全部上传完成后通知主线程
  self.postMessage({ type: 'all-complete' });
}

self.onmessage = (e) => {
  if (e.data.type === 'start-upload') {
    batchUpload(e.data.files);
  }
};

主线程（Angular组件）的配合代码 #

在Angular组件中，只需把文件列表传给WebWorker，然后监听Worker的状态回调即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html'
})
export class UploadComponent {
  uploadWorker: Worker;

  constructor() {
    // 初始化WebWorker
    this.uploadWorker = new Worker(new URL('./upload.worker.ts', import.meta.url));
    
    // 监听Worker的消息
    this.uploadWorker.onmessage = (e) => {
      switch(e.data.type) {
        case 'success':
          console.log(`文件 ${e.data.fileId} 上传成功`);
          // 更新UI进度
          break;
        case 'error':
          console.error(`文件 ${e.data.fileId} 上传失败:`, e.data.error);
          break;
        case 'all-complete':
          console.log('所有文件上传完成');
          break;
      }
    };
  }

  handleFileUpload(event: Event) {
    const fileList = (event.target as HTMLInputElement).files;
    if (fileList) {
      // 给Worker发送文件列表
      this.uploadWorker.postMessage({
        type: 'start-upload',
        files: Array.from(fileList)
      });
    }
  }

  ngOnDestroy() {
    // 组件销毁时终止Worker
    this.uploadWorker.terminate();
  }
}

这两种方案都能有效把WebWorker中的上传请求并发数限制为3，彻底解决后端因同时处理多个请求导致的超时问题，比固定1秒间隔的临时方案更可靠。

内容的提问来源于stack exchange，提问作者Liz.131416