[vue,elementUI]多选循环执行，如果是异常就要提示用户，是否继续执行其它选中的，这个该怎么处理啊？

Z时代
2024-02-27
分类：IT

页面有一个可以多选的列表,如图所示：
[vue,elementUI]多选循环执行，如果是异常就要提示用户，是否继续执行其它选中的，这个该怎么处理啊？
选中的数据，要循环调用后台的方法，每调用一次后端，就对结果进行判断，这个该怎么catch异常啊，被迫写前端的后端程序员在线求助。。。
这是调用地方的代码：

// 选中多个凭证 重新生成
        this.vouchers.forEach((item, index) => {
          array.push(this.reCreateVoucherMethod(url, item, index).then(res=>{
            if (res.status != 200) {
              $this.reCreateFailed.push(item.voucherCode);
            }
          }));
        })
        Promise.all(array).then(async (result)=>{
          this.$notify({
            title: '提示',
            message: '000000000',
            type: 'info',
            duration: 0
          });        })

这是被调用的代码：

reCreateVoucherMethod: async function (url, voucher, index) {
      return new Promise(async (resolve, reject) => {
        debugger
        const res = await this.$http.post(url, null, {
          params: {
            busiSys: voucher.busiSysType,
            busiScen: voucher.busiScenario,
            busiId: voucher.busiId,
            voucherId: voucher.voucherId
          }
        });
        console.log(res, index);
        resolve({
          res:res,
          index:index
        });
        reject({
          res:res,
          index:index
        });
      })    }

补充：已解决，下方是这部分全部的代码：

data() {
    return {
      vouchers: [],
      voucherIndex: 0
    }  },

// 新加--重新生成凭证  前台循环生成 所选的全部生成完提示成功 中间有报错就提示是否继续=============================================
    reCreateVoucher() {
      // 判断是否勾选数据
      this.vouchers = this.$refs.voucherRef.selection;
      if (this.vouchers.length == 0) {
        this.$message.warning('请选择凭证数据！');
        return;
      }
      // 重新生成动作
      this.$confirm('此操作将重新生成选中的业务凭证, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.fnLoading = true;
        const url = '/joys-rest/joys-acc-engine/voucher/reCreate/byId';
        this.reCreateVoucherMethod(url);
      }).catch(() => {
      });    },

// 新加
    reCreateVoucherMethod: function (url) {
      this.$http.post(url, null, {
        params: {
          busiSys: this.vouchers[this.voucherIndex].busiSysType,
          busiScen: this.vouchers[this.voucherIndex].busiScenario,
          busiId: this.vouchers[this.voucherIndex].busiId,
          voucherId: this.vouchers[this.voucherIndex].voucherId
        }
      }).then(res => {
        debugger
        //请求成功
        if (res.status == 200) {
          if (this.voucherIndex == this.vouchers.length - 1){
            this.$message.success('所选凭证重新生成执行完毕！');
            this.fnLoading = false;
            this.voucherIndex = 0;
            return;
          }
          this.voucherIndex += 1;
          this.reCreateVoucherMethod(url)
        }
      }).catch(err => {
        if (err.body.message != '') {
          //请求失败提示
          this.$confirm(this.vouchers[this.voucherIndex].voucherCode + '号凭证生成失败，是否继续执行其他', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //确认继续请求
            if (this.voucherIndex == this.vouchers.length - 1){
              this.$message.success('所选凭证重新生成执行完毕！');
              this.fnLoading = false;
              this.voucherIndex = 0;
              return;
            }
            this.voucherIndex += 1;
            this.reCreateVoucherMethod(url)
          })
        }
      });    },

回答：

递归，成功后再请求，
data里面新增变量i，初始值0，记录当前参数位置；
request(){

  this.post(url,this.vouchers[this.i],res =>{
  //请求成功
    if(status == 200){
      if(this.i==arr.length-1) return
      this.i+=1;
      this.request()
    }else{
     //请求失败提示
      this.$confirm('生成失败，是否继续执行其他','提示',{
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning'
      })
      .then(()=>{
      //确认继续请求
        if(this.i==arr.length-1) return
        this.i+=1;
        this.request()
      })
      .catch(err =>{})
    }
  })}