vue前端实现同步发送请求,可设置并发数量【已封装】

新建 TaskManager.js

export default class TaskManager {constructor(maxConcurrentTasks = 1) {// 最大并发任务数// to do// 并发任务数大于1 接口开始有概率返回空值，推测是后端问题this.maxConcurrentTasks = maxConcurrentTasks;this.currentTasks = 0;this.taskQueue = [];this.allTasksDone = false; // 终结标识this.allTasksDonePromise = new Promise((resolve) => {this.resolveAllTasksDone = resolve;});}// 添加任务addTask(taskFn) {return new Promise((resolve, reject) => {this.taskQueue.push({ taskFn, resolve, reject });this.processQueue();});}// 处理任务队列async processQueue() {if (this.currentTasks >= this.maxConcurrentTasks || this.taskQueue.length === 0) {return;}if (this.allTasksDone) {// 如果已经标记为所有任务完成，则不再处理新任务return;}const { taskFn, resolve, reject } = this.taskQueue.shift();this.currentTasks++;try {const result = await taskFn();resolve(result);} catch (error) {reject(error);} finally {this.currentTasks--;if (this.currentTasks + this.taskQueue.length === 0) {this.allTasksDone = true;this.resolveAllTasksDone(); // 标记所有任务完成}this.processQueue();}}// 等待所有任务完成waitForAllTasksDone() {return this.allTasksDonePromise;}
}

在项目中使用

import TaskManager from './TaskManager'

 taskManager: null,

this.pdfLoading = true
this.taskManager = new TaskManager()
for (let i = 0; i < this.selectionChangeData.length; i++) {this.taskManager.addTask(() => this.handleDownloadReport(this.selectionChangeData[i]))
}
// 等待所有任务完成
await this.taskManager.waitForAllTasksDone()
this.pdfLoading = false

handleDownloadReport(rowData) {return new Promise((resolve, reject) => {const msg = this.$Message.loading({content: '加载中，请稍等...',duration: 0})let downloadPromises = []downloadPromises.push(this.$http.report.downloadReportExamine({reportId: rowData.id,attachmentExtension: 'pdf'}).then(respT => {// xxx}))downloadPromises.push(this.$http.report.downloadReport({reportId: rowData.id,attachmentExtension: 'pdf'}).then(respT => {// xxx}))Promise.all(downloadPromises).then(() => {msg() // 关闭加载提示resolve()}).catch(error => {console.error('下载报告时发生错误：', error)this.$Message.error('下载报告失败')msg() // 关闭加载提示reject()})})},