Javascript 异步提交函数在 forEach 循环中无法等待完成 (Vue)

Javascript async submit function cannot wait for finishing in forEach loop (Vue)

提问人:Phú Huỳnh Gia 提问时间:10/26/2023 更新时间:10/26/2023 访问量:34

问:

在我的 Vue 项目中,我有一个日期字符串数组和一个异步函数this.dateList

importLaborDtl(dsLaborHed, dsLaborDtl) {
      let that = this;
      setTimeout(() => {
        global.loaderMsg(global.L('submitting'));
      }, 100);
      that.busy = true;
      that.$forceUpdate();
      // console.trace(dsLaborHed, dsLaborDtl);
      imp
        .importTime(dsLaborHed, dsLaborDtl)
        .then((res) => {
          global.loaderHide();
          if (global.showErr(res)) {
            console.trace(res);
            that.busy = false;
            that.$forceUpdate();
            return;
          }
          global.toast(global.L('sucessfull'));
          this.$modal.close('sucessfull');
          that.$forceUpdate();
        })
        .catch((err) => {
          global.loaderHide();
          global.toast(err.message);
          that.busy = false;
          that.$forceUpdate();
        });
    }

当我循环数组并导入其中的每个项目时,问题发生了:this.dateListforEachthis.dateList

this.dateList.forEach((date) => {
            getLaborHed(
              date,
              this.user.employee.empId,
              this.user.employee.shift
            ).then((res) => {
              if (res) {
                this.busy = false;
                const data = JSON.parse(res.data.DataRaw);
                if ((data || []).length > 0) {
                  dsLaborHed = dsLaborHed.map((el) => {
                    return {
                      ...el,
                      ClockInDate: global.fsdate(date),
                      LaborHedSeq: data[0].LaborHed_LaborHedSeq,
                    };
                  });
                  dsLaborDtl = dsLaborDtl.map((el) => {
                    return {
                      ...el,
                      ClockInDate: global.fsdate(date),
                      LaborHedSeq: data[0].LaborHed_LaborHedSeq,
                      ClockinTime: 0.0,
                      ClockOutTime: (23 * 1 + 59 / 60).toFixed(2),
                      DspClockInTime: '00:00',
                      DspClockOutTime: '23:59',
                      LaborHrs: parseFloat(laborHour3),
                      BurdenHrs: parseFloat(laborHour3),
                    };
                  });
                } else {
                  dsLaborHed = dsLaborHed.map((el) => {
                    return {
                      ...el,
                      ClockInDate: global.fsdate(date),
                      LaborHedSeq: 0,
                    };
                  });
                  dsLaborDtl = dsLaborDtl.map((el) => {
                    return {
                      ...el,
                      ClockInDate: global.fsdate(date),
                      LaborHedSeq: 0,
                      ClockinTime: 0.0,
                      ClockOutTime: (23 * 1 + 59 / 60).toFixed(2),
                      DspClockInTime: '00:00',
                      DspClockOutTime: '23:59',
                      LaborHrs: parseFloat(laborHour3),
                      BurdenHrs: parseFloat(laborHour3),
                    };
                  });
                }
                console.trace(date);
                this.importLaborDtl(dsLaborHed, dsLaborDtl); // Call async function importLaborDtl
              } else {
                this.busy = false;
              }
            });
          });

它不能按顺序导入,有时它可以导入数组中的所有项目,有时它只是导入数组中的一些项目。我不确定这是否是异步问题。如果您能帮助我修复此错误,我将不胜感激。非常感谢。

javascript android vue.js

评论

0赞 Kubwimana Adrien 10/26/2023
importLaborDtl不是异步的。了解如何使用 Promises。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......
0赞 Phú Huỳnh Gia 10/26/2023
If 不是异步函数,而是 promise。所以你能解释一下或给我一些原因为什么这个承诺不能按顺序运行(基本上会将日期插入到数据库中,但是在检查数据时,无法插入某些日期)。谢谢importLaborDtlimportLaborDtlthis.dateList
0赞 yoduh 10/27/2023
如果这是一个承诺,你会期望在某个地方看到......根据你的代码,你已经编写了一个不返回任何内容的普通函数。它需要返回一个 Promise,你需要它的结果,而你也没有这样做。你碰巧是对的,forEach 不等待异步函数调用,所以除了编写一个正确返回你等待的 Promise 的异步函数外,你还需要使用不同类型的循环。new Promise(...)await

答: 暂无答案