VUE\JS处理在循环中异步和同步执行的问题

业务场景:

1、有一个组别集合,每一个小组别对象里面有一个数据集合,需要循环去校验每个不同组里的数据(不同组合因为一些特殊属性不能合并到一个组里),全都符合就通过验证,去处理后续业务。
2、现在,在校验规则方法里对一个集合里的每一条数据进行强校验和弱校验,弱校验需要在提升框放入确定的操作按钮,允许通过,再循环到下一条数据的验证。

代码分析

1、涉及到组别集合的循环、组别内部数据的循环,循环套循环
2、this.$confirm的待处理问题,怎么让循环卡住,等待处理后再放行

存在问题:

循环调用校验方法,检验方法在弹出待确定按钮时,循环依旧在往下执行,没有等点击确定后再进行下一个循环,异步问题导致获取不到准确的校验结果。

代码处理:

关键处理:
async … await
for (… of …)
return new Promise((resolve, reject) => {})
const verifyFormData = async (index, fData) => {})

//提交数据
async submit() {//待验证数据为空直接通过if (this.setData.tData?.length > 0) {//需要验证的组let rulesData = this.setData.ruleSetData.filter(t => t.state == '1');if (rulesData.length > 0) {let ok = true;let results= []; // 存储每个数据验证结果的数组for (let item of rulesData) {//调用校验方法let result = await this.takeRulesVerify(item);results.push(result);if (results.length === rulesData.length) {// 最终判断if (results.every((result) => result)) {//数据全都验证通过//执行后续业务}}}}}else{//无数据待验证直接通过//执行后续业务}
},//校验规则方法
async takeRulesVerify(setData) {// start return new Promise((resolve, reject) => {// 使用本表单的校验let num = 0; // 初始化变量num,用于计数通过验证的表单数据const verifyFormData = async (index, fData) => {if (index < fData.length) {// 处理fData校验业务业务 start......let str="xxxxxxx = xxxxxx"// 处理校验业务业务 endif (!eval(str)) {//验证通过num++; // 如果表达式为假,增加num计数// 继续下一个验证规则verifyFormData(index + 1, formData);} else {//验证未通过,需要进入强弱验证机制// 如果表达式为真,显示确认对话框(验证规则 只有真的时候才会触发,比如a>b了)// strengthValue: 0强校验  1弱校验let remark = el.reminder ? el.reminder : '校验不通过'if (settingsData.strengthValue == '0') {this.$confirm(remark, '提示', {customClass: 'costomGenerated',showCancelButton: true,showConfirmButton: false,type: 'warning',confirmButtonClass: 'press_button',cancelButtonClass: 'border_buttom'});} else {this.$confirm(remark + ',是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 用户点击确定后,允许这条验证通过num++;// 继续下一个验证规则verifyFormData(index + 1,formData); }).catch((err) => {// 用户点击取消后执行的逻辑// 可以根据需要处理});}}} else {// 当所有循环验证处理完成// 如果num等于验证数据数组的长度,即所有的拦截都通过,执行后续业务if (num == fData.length) {//验证通过,执行后续业务resolve(true)} else {//验证未通过resolve(true)}}};verifyFormData(0, setData.fData);});
},

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

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

相关文章

五种主流数据库连接池的比较和分析(从零入门)

数据库连接池&#xff08;Database Connection Pool&#xff09;是现代应用程序中至关重要的组件。它通过管理一组数据库连接的复用&#xff0c;极大地提升了应用程序的性能和效率。在没有连接池的情况下&#xff0c;每个数据库请求都需要打开和关闭数据库连接&#xff0c;这不…

Python编辑器pycharm详细安装步骤

PyCharm 的详细安装步骤 以下是在 Windows 系统上安装 PyCharm 的详细步骤&#xff1a; 第一步&#xff1a;下载安装程序 访问 PyCharm 官方网站&#xff08;https://www.jetbrains.com/pycharm/&#xff09;&#xff0c;根据自己的需求选择社区版&#xff08;Community&…

内容安全复习 6 - 白帽子安全漏洞挖掘披露的法律风险

文章目录 安全漏洞的法律概念界定安全漏洞特征白帽子安全漏洞挖掘面临的法律风险“白帽子”安全漏洞挖掘的风险根源“白帽子”的主体边界授权行为边界关键结论 安全漏洞的法律概念界定 可以被利用来破坏所在系统的网络或信息安全的缺陷或错误&#xff1b;被利用的网络缺陷、错…

车辆轨迹预测系列 (三):nuScenes数据集详细介绍-1

车辆轨迹预测系列 (三)&#xff1a;nuScenes数据集详细介绍-1 文章目录 车辆轨迹预测系列 (三)&#xff1a;nuScenes数据集详细介绍-1一、数据集准备1、解压2、安装nuscenes-devkit3、介绍 二、架构内容解释1、category 类别2、attribute 属性3、visibility 可见性4、instance …

通讯协议大全(UART,RS485,SPI,IIC)

参考自&#xff1a; 常见的通讯协议总结&#xff08;USART、IIC、SPI、485、CAN&#xff09;-CSDN博客 UART那么好用&#xff0c;为什么单片机还需要I2C和SPI&#xff1f;_哔哩哔哩_bilibili 5分钟看懂!串口RS232 RS485最本质的区别&#xff01;_哔哩哔哩_bilibili 喜欢几位…

居中显示-css样式

在微信小程序中&#xff0c;要让一个盒子&#xff08;子元素&#xff09;在另一个盒子&#xff08;父元素&#xff09;内部居中显示&#xff0c;可以使用以下几种方法&#xff1a; 1. 使用 Flex 布局 微信小程序支持使用类似于 CSS Flexbox 的布局方式。以下是使用 Flex 布局的…

mysql 没有主键的表更新数据会所全表

---创建表 回话一 mysql> create table t1 ( a int ,b char(2),c char(10)); Query OK, 0 rows affected (0.17 sec)mysql> insert into t1 values (1,1,1); Query OK, 1 row affected (0.00 sec)mysql> insert into t1 values (2,2,2); Query OK, 1 row affected (0.…

与码无关:分数限制下,选好专业还是选好学校?

本文的目标读者&#xff1a;24届的高考生和家长。 写这篇非技术性文章&#xff0c;是因为我看到了24届考生和21年的我同样迷茫。 事先声明&#xff0c;本文带有强烈的个人思考色彩&#xff0c;可能会引起不适&#xff0c;如有不同观点&#xff0c;欢迎在评论区讨论。 一、前言…

私域电商新纪元:消费增值模式的创新与成功实践

大家好&#xff0c;我是吴军&#xff0c;很高兴能够与您分享私域电商领域的魅力与机遇。今天&#xff0c;我将为大家呈现一个令人瞩目的成功案例&#xff0c;这个案例充分展现了私域电商的巨大潜力和无限可能。 在短短一个月的时间里&#xff0c;我们的客户成功实现了业绩的飞跃…

php,python aes加密反解

1. python版本 import base64 from Crypto.Cipher import AES from Crypto.Util.Padding import pad, unpadclass AESUtilCBC:def __init__(self, key, iv):self.key key.encode(utf-8)self.iv iv.encode(utf-8)self.pad_length AES.block_sizedef encrypt(self, data):try…

NTFS和exFAT哪个性能好 U盘格式化NTFS好还是exFAT好 mac不能读取移动硬盘怎么解决

文件系统的选择对存储设备的性能和兼容性有着重要影响。而NTFS和EXFAT作为两种常见的文件系统&#xff0c;它们各有特点&#xff0c;适用于不同的使用场景。我们将深入探讨NTFS和EXFAT的区别&#xff0c;帮助大家选择最适合自己需求的文件系统。 NTFS&#xff1a;稳定与性能的平…

进口高压电磁阀厂家:高压电磁阀的操作注意事项有哪些?

高压电磁阀是重要的控制元件&#xff0c;在工业控制系统中&#xff0c;主要被用于调整介质的方向、流量、速度和其他的参数&#xff0c;也可配合不同的电路来实现预期的控制。那么&#xff0c;高压电磁阀的操作注意事项有哪些&#xff1f;下面就让进口高压电磁阀厂家来为大家简…

判断一个Java服务是不是GateWay

方法 直接在对应服务的url后变加上后缀/actuator/gateway/routes&#xff0c;看是否会返回Gateway的路由信息。 如果返回了GateWay的路由列表&#xff0c;则该服务为Gateway服务。

jrebel安装使用教程(2022.4.1版本)

本方法适用于jrebel2022.4.1版本&#xff0c;之后的版本不再适用。 1.下载插件 下载地址 2.安装插件 可以通过idea内部安装 也可以将插件解压进idea的安装目录下的plugins。 3.激活 Team URL中填入 https://jrebel.qekang.com/{guid}这里提供两个guid生成地址&#xf…

大数据面试-Hive

char和varchar的区别&#xff1f; char类型的长度是固定的&#xff0c;不足的部分用隐藏空格填充&#xff0c;varchar的长度是可变的。 这就表示&#xff0c;存储字符串’abc’&#xff0c;使用char(10)&#xff0c;表示存储的字符将占10个字节&#xff08;包括7个空字符&…

【系统架构设计师】二、操作系统知识(操作系统概述|进程管理)

目录 一、操作系统概述 1.1 操作系统定义 1.2 操作系统的功能 1.3 操作系统的分类 1.4 嵌入式操作系统主要特点 二、进程管理 2.1 进程的组成与状态 2.2 前趋图 2.3 进程资源图 2.4 进程调度 2.5进程调度算法 2.6 死锁 2.7 进程与线程 2.7.1 进程 2.7.2 线程 2…

2022年大作业参考报告-使用C++语言开发小学生成绩管理系统、中学生成绩管理系统、大学生成绩管理系统【240621更新】

背景&#xff1a; 目录 第一章 需求分析 2 1.1 问题描述 2 6.1 功能需求 2 6.2 开发环境 2 6.3 开发过程 2 第二章 概要设计 3 2.1 总体设计 3 2.2 类的定义 3 2.3 接口设计 5 2.4 运行界面设计 6 第三章 详细设计 …

MySQL操作数据库语句

mysql关键字不区分大小写 1. 创建数据库 CREATE DATABASE [IF NOT EXISTS] westos (带[ ]表示该语句可有可无) 2. 删除数据库 DROP DATABASE [IF EXISTS] westos 3.使用数据库 -- tab键的上面&#xff0c;如果你的表名或者字段名是一个特殊的字符&#xff0c;就需要带 …

QT 中的QAction详解

QAction是Qt框架中的一个重要类&#xff0c;它主要用于在用户界面中创建动作。这些动作可以表现为菜单项、工具栏按钮或快捷键等&#xff0c;通过与信号槽机制结合&#xff0c;实现与用户交互的功能。以下是关于QAction的详细解释&#xff1a; 定义和用途&#xff1a; QAction…

超级干货 !数据平滑9大妙招(python版)_python指数平滑预测案例

大家好&#xff0c;对数据进行平滑处理的方法有很多种&#xff0c;具体的选择取决于数据的性质和处理的目的。如果你对Python感兴趣&#xff0c;想要学习pyhton&#xff0c;这里给大家分享一份**Python全套学习资料**&#xff0c;都是我自己学习时整理的&#xff0c;希望可以帮…