boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网!

文章导读

JS如何实现请求队列


avatar
站长 2025年8月14日 1

JavaScript中实现请求队列的核心是通过封装一个类来管理异步任务的并发与顺序,如RequestQueue类通过维护任务队列、控制最大并发数(concurrency)、跟踪运行中任务数(running)来实现;每当调用addTask添加任务时,会将返回Promise的函数推入队列并触发processQueue处理;processQueue采用递归调用机制,在未超并发限制且队列非空时,取出任务执行,完成后减少运行计数并继续处理后续任务,从而确保请求按设定并发数有序执行,避免资源过载或API限流,最终实现高效可控的异步任务调度。

JS如何实现请求队列

JavaScript中实现请求队列,核心在于管理异步操作的并发与顺序。通过构建一个能够控制同时进行请求数量的机制,我们可以避免API限流、优化资源利用,并确保某些操作按序执行。这通常涉及到维护一个待处理任务列表,并用一个调度器来按规则消费它们。

在JavaScript里,构建一个请求队列,我个人觉得最实用且灵活的方式是封装一个类。这个类能帮你管理任务的添加、并发数的控制,以及任务的执行状态。它就像一个智能的交通指挥员,确保你的网络请求不会一窝蜂地冲出去,而是井然有序地通行。

下面是一个我常用的基础实现思路:一个

RequestQueue

类,它维护一个任务列表(通常是返回Promise的函数),并限制同时运行的任务数量。

 class RequestQueue {     constructor(concurrency = 3) {         this.concurrency = concurrency; // 最大并发数         this.queue = []; // 等待执行的任务队列         this.running = 0; // 当前正在运行的任务数         this.isProcessing = false; // 队列是否正在处理中,用于防止重复启动处理器     }      /**      * 添加一个任务到队列。任务是一个返回Promise的函数。      * @param {Function} taskFn - 一个返回Promise的函数      * @returns {Promise} - 返回任务执行的Promise      */     addTask(taskFn) {         return new Promise((resolve, reject) => {             this.queue.push({ taskFn, resolve, reject });             this.processQueue(); // 每次添加任务都尝试处理队列         });     }      async processQueue() {         // 如果正在运行的任务数已达到并发上限,或者队列中没有待处理任务,则停止         if (this.running >= this.concurrency || this.queue.length === 0) {             return;         }          const { taskFn, resolve, reject } = this.queue.shift(); // 取出队列头部任务         this.running++; // 增加正在运行的任务计数          try {             const result = await taskFn(); // 执行任务             resolve(result); // 任务成功,解决对应的Promise         } catch (error) {             console.error('任务执行失败:', error);             reject(error); // 任务失败,拒绝对应的Promise         } finally {             this.running--; // 任务完成(无论成功失败),减少正在运行的任务计数             this.processQueue(); // 任务完成后,再次尝试处理队列,以启动下一个任务         }



评论(已关闭)

评论已关闭