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

news2024/12/24 21:34:04

新建 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()
          })
      })
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2264926.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

esp8266_TFTST7735语音识别UI界面虚拟小助手

文章目录 一 实现思路1 项目简介1.1 项目效果1.2 实现方式 2 项目构成2.1 软硬件环境2.2 完整流程总结&#xff08;重点整合&#xff09;(1) 功能逻辑图(2) 接线(3) 使用esp8266控制TFT屏(4)TFT_espI库配置方法(5) TFT_esp库常用代码详解(6)TFT屏显示图片(7) TFT屏显示汉字(8) …

java web springboot

0. 引言 SpringBoot对Spring的改善和优化&#xff0c;它基于约定优于配置的思想&#xff0c;提供了大量的默认配置和实现 使用SpringBoot之后&#xff0c;程序员只需按照它规定的方式去进行程序代码的开发即可&#xff0c;而无需再去编写一堆复杂的配置 SpringBoot的主要功能…

Windows下ESP32-IDF开发环境搭建

Windows下ESP32-IDF开发环境搭建 文章目录 Windows下ESP32-IDF开发环境搭建一、软件安装二、搭建IDF开发环境2.1 安装VS Code插件&#xff1a;2.2 配置ESP-IDF插件&#xff1a;2.3 下载例程源码&#xff1a; 三、编译和烧录代码四、Windows下使用命令行编译和烧录程序4.1 配置环…

6UCPCI板卡设计方案:8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

基于双TMS320C6678 XC7K420T的6U CPCI Express高速数据处理平台 1、板卡概述 板卡由我公司自主研发&#xff0c;基于6UCPCI架构&#xff0c;处理板包含双片TI DSP TMS320C6678芯片&#xff1b;一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片&#xff1b;六个千兆网口&#xff…

c++--------------------------------接口实现

引用参数 引用的基本概念 在C中&#xff0c;引用是一个别名&#xff0c;它为已存在的变量提供了另一个名字。引用的声明格式为类型& 引用名 变量名;。例如&#xff0c;int num 10; int& ref num;&#xff0c;这里ref就是num的引用&#xff0c;对ref的操作等价于对nu…

docker run命令大全

docker run命令大全 基本语法常用选项基础选项资源限制网络配置存储卷和挂载环境变量重启策略其他高级选项示例总结docker run 命令是 Docker 中最常用和强大的命令之一,用于创建并启动一个新的容器。该命令支持多种选项和参数,可以满足各种使用场景的需求。以下是 docker ru…

rk3568制冷项目驱动开发流程汇总(只适用于部分模块CIF DVP等,自用)

采用fpga输入&#xff0c;3568采集并显示至hdmi RKVICAP 驱动框架说明 RKVICAP驱动主要是基于 v4l2 / media 框架实现硬件的配置、中断处理、控制 buffer 轮转&#xff0c;以及控制 subdevice(如 mipi dphy 及 sensor) 的上下电等功能。 对于RK356X 芯片而言&#xff0c; VICAP…

怎么在idea中创建springboot项目

最近想系统学习下springboot&#xff0c;尝试一下全栈路线 从零开始&#xff0c;下面将叙述下如何创建项目 环境 首先确保自己环境没问题 jdkMavenidea 创建springboot项目 1.打开idea&#xff0c;选择file->New->Project 2.选择Spring Initializr->设置JDK->…

springboot476基于vue篮球联盟管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统篮球联盟管理系统信息管理难度大&#xff0c;容错率低&am…

蓝桥杯嵌入式备赛教程(1、led,2、lcd,3、key)

一、工程模版创建流程 第一步 创建新项目 第二步 选择型号和管脚封装 第三步 RCC使能 外部时钟&#xff0c;高速外部时钟 第四步晶振时钟配置 由数据手册7.1可知外部晶振频率为24MHz 最后一项设置为80 按下回车他会自动配置时钟 第五步&#xff0c;如果不勾选可能程序只会…

步进电机位置速度双环控制实现

步进电机位置速度双环控制实现 野火stm32电机教学 提高部分-第11讲 步进电机位置速度双环控制实现(1)_哔哩哔哩_bilibili PID模型 位置环作为外环,速度环作为内环。设定目标位置和实际转轴位置的位置偏差,经过位置PID获得位置期望,然后讲位置期望(位置变化反映了转轴的速…

devops和ICCID简介

Devops DevOps&#xff08;Development 和 Operations 的组合&#xff09;是一种软件开发和 IT 运维的哲学&#xff0c;旨在促进开发、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。它强调自动化流程&#xff0c;持续集成&#xff08;CI&#xf…

Apache RocketMQ 5.1.3安装部署文档

官方文档不好使&#xff0c;可以说是一坨… 关键词&#xff1a;Apache RocketMQ 5.0 JDK 17 废话少说&#xff0c;开整。 1.版本 官网地址&#xff0c;版本如下。 https://rocketmq.apache.org/download2.配置文件 2.1namesrv端口 在ROCKETMQ_HOME/conf下 新增namesrv.pro…

数据结构:算法篇:快速排序;直接插入排序

目录 快速排序 直接插入排序 改良版冒泡排序 快速排序 理解&#xff1a; ①从待排序元素中选定一个基准元素&#xff1b; ②以基准元素将数据分为两部分&#xff1a;&#xff08;可以将&#xff1a;大于基准元素放左&#xff0c;小于基准元素放右&#xff09; ③对左半部分…

运维工程师面试系统监控与优化自动化与脚本云计算的理解虚拟化技术的优点和缺点

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…

如何打造用户友好的维护页面:6个创意提升WordPress网站体验

在网站运营中&#xff0c;无论是个人博主还是大型企业网站的管理员&#xff0c;难免会遇到需要维护的情况。无论是服务器迁移、插件更新&#xff0c;还是突发的技术故障&#xff0c;都可能导致网站短暂无法访问。这时&#xff0c;设计维护页面能很好的缓解用户的不满&#xff0…

postman读取文件执行

要从文件获取的变量 text 在pre-request 中写从文件获取数据的脚本。脚本实现了&#xff0c;设置了text默认值&#xff0c;从文件读取text列&#xff0c;将text存入环境变量 //获取text参数 var text "济南天气"; if(data.text){ text data.text } pm.environment.…

37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体 实现效果 知识点 WebGLRenderer WebGLRenderer 是Three.js中的一个渲染器类&#xff0c;用于将3D场景渲染到网页上。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数&#xff0c;可选。 常用…

【Rust自学】4.4. 引用与借用

4.4.0 写在正文之前 这一节的内容其实就相当于C的智能指针移动语义在编译器层面做了一些约束。Rust中引用的写法通过编译器的约束写成了C中最理想、最规范的指针写法。所以学过C的人对这一章肯定会非常熟悉。 喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文…

电脑使用CDR时弹出错误“计算机丢失mfc140u.dll”是什么原因?“计算机丢失mfc140u.dll”要怎么解决?

电脑使用CDR时弹出“计算机丢失mfc140u.dll”错误&#xff1a;原因与解决方案 在日常电脑使用中&#xff0c;我们时常会遇到各种系统报错和文件丢失问题。特别是当我们使用某些特定软件&#xff0c;如CorelDRAW&#xff08;简称CDR&#xff09;时&#xff0c;可能会遇到“计算…