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

本文主要是介绍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);});
},