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

devtools/2024/9/23 5:10:43/

业务场景:

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

代码分析

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

存在问题:

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

代码处理:

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

javascript">//提交数据
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.ppmy.cn/devtools/55668.html

相关文章

NLP之实体抽取

简介 实体抽取(Entity Extraction)是自然语言处理(NLP)领域中一项重要的技术,它的目的是从非结构化的文本数据中识别并提取出有意义的实体。 实体是指文本中表示某种具体事物的词语或短语,通常包括以下几类: 人名&#xff1a;如"马云"、“比尔盖茨” 地名&#xf…

【unity笔记】五、UI面板TextMeshPro 添加中文字体

Unity 中 TextMeshPro不支持中文字体&#xff0c;下面为解决方法&#xff1a; 准备字体文件&#xff0c;从Windows系统文件的Fonts文件夹里拖一个.ttf文件&#xff08;C盘 > Windows > Fonts &#xff09; 准备字库文件,新建一个文本文件&#xff0c;命名为“字库”&…

grafana连接influxdb2.x做数据大盘

连接influxdb 展示数据 新建仪表盘 选择存储库 设置展示

MIGO增强(扩展字段,屏幕增强字段,常规保存增强)

1.MIGO前台增强: 1.SE18找到增强点:MB_GOODSMOVEMENT 2.找到相应的BADI:右键创建实施 3.找到重写的方法 METHOD if_ex_mb_document_badi~mb_document_before_update.DATA:lv_stat TYPE c,lv_type TYPE bapi_mtype,lv_msg TYPE bapi_msg.DATA:lv_message TYPE string.IF sy-tc…

Linux shell编程学习笔记59: ps 获取系统进程信息,类似于Windows系统中的tasklist 命令

0 前言 系统进程信息是电脑网络信息安全检查中的一块重要内容&#xff0c;对于使用Linux和基于Linux作为操作系统的电脑来说&#xff0c;可以使用ps命令。 1 ps命令 的功能、格式和选项说明 1.1 ps命令 的功能 Linux 中的ps&#xff08;意为&#xff1a;process status&…

基于weixin小程序的民宿短租系统的设计与实现

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;房主管理&#xff0c;房间类型管理&#xff0c;用户管理&#xff0c;民宿信息管理&#xff0c;民宿预订管理&#xff0c;系统管理 小程序功能包括&#xff1a;系统首页&#xff0c;民宿信息&#xff0c…

实习公司内部OA系统项目经验

文章目录 前言一、请介绍一下你实习所做的项目?二、你觉得你项目的难点有哪些?三、你这个考勤打卡功能可以详细介绍一下吗1. 功能需求分析2. 系统设计与架构3. 数据库设计4. 具体实现5. 测试与优化四、Redis缓存技术用到哪里了请详细介绍一下1.应用场景2.缓存设计3.具体实现4…

数字图像分析(第一部分)

文章目录 第2章 图像数字化数字化采样与量化像素的邻域像素的距离图像采集网络**离散直线性**距离变换**第3章 图像变换可分离和正交图像变换2D DFT变换及其本质**哈达玛变换KL变换(PCA)第4章 形态学二值形态学膨胀和腐蚀开启和闭合击中-击不中变换二值形态学实用算法噪声滤除目…