element-ui两个$confirm含有ajax请求不弹出第二个

ajax请求方法

/**
 * 资源释放
 * @param data
 * @returns {*}
 */
export function releaseResourceAutoconfig(data) {
  return axios.post("/autoconfig/product/inventory/releaseProductOnTheWay?loading=loading", data);
}

问题代码

 this.$confirm("是否释放资源?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    param.operationType.deleteProductChecked = false;
    releaseResourceAutoconfig(param).then(res => {
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: res.msg
        });
        // 释放完成在查询一下
        this.tableRefresh();
        this.$confirm("是否删除产品?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          param.operationType.deleteProductChecked = true;
          releaseResourceAutoconfig2(param).then(res => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
              // 释放完成在查询一下
              this.tableRefresh();
            } else {
              this.$message.error(res.msg);
            }
          });
        });
      } else {
        this.$message.error(res.msg);
      }
    });
  });

该代码中”是否删除产品“弹框不弹出

正确代码

// 方法中调用
releaseResource.call(this,param);

async function releaseResource(param) {
  try {
    await this.$confirm("是否释放资源?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    });

    param.operationType.deleteProductChecked = false;
    const releaseRes = await releaseResourceAutoconfig(param);
    if (releaseRes.code === 200) {
      this.$message({
        type: "success",
        message: releaseRes.msg
      });
      // 释放完成在查询一下
      if (this.$refs.parser) {
        this.$refs.parser.tableRefresh();
      }

      await this.$confirm("是否删除产品?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      });

      param.operationType.deleteProductChecked = true;
      const deleteRes = await releaseResourceAutoconfig2(param);
      if (deleteRes.code === 200) {
        this.$message({
          type: "success",
          message: deleteRes.msg
        });
        // 释放完成在查询一下
        if (this.$refs.parser) {
          this.$refs.parser.tableRefresh();
        }
      } else {
        this.$message.error(deleteRes.msg);
      }
    } else {
      this.$message.error(releaseRes.msg);
    }
  } catch (error) {
    console.error(error);
    // this.$message.error("操作失败");
  }
}

原因分析

在原始代码中,第二个confirm弹框是在第一个confirm的then回调函数中触发的。这样会导致第二个confirm的promise与第一个confirm的promise链式调用在同一个then回调中,这可能会导致异步执行顺序混乱,从而导致第二个$confirm不弹出。

在正确的代码中,将第二个confirm的逻辑提取到一个单独的async函数中,同时使用async/await来确保异步操作的顺序执行。这样可以避免多个异步操作的混乱执行顺序,从而确保第二个confirm能够正常弹出。

知识点

promise promise链式调用

Promise是 JavaScript 中用于处理异步操作的对象,它代表了一个异步操作的最终完成或失败,并且可以用于处理异步操作的结果。Promise对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当一个异步操作完成时,Promise对象的状态会从pending变为fulfilled,表示操作成功;或者从pending变为rejected,表示操作失败。

Promise链式调用是指通过使用Promise对象的then()方法来处理异步操作的结果,以及串联多个异步操作的操作流程。通过then()方法,可以在一个Promise对象的状态改变时执行相应的操作,同时也可以返回一个新的Promise对象,从而构成一个Promise链。

在Promise链式调用中,每个then()方法都返回一个新的Promise对象,这样就可以将多个异步操作串联起来,形成一个操作流程。这种方式可以更清晰地表达异步操作的顺序和逻辑,同时也更容易处理异步操作的错误和异常情况。

文章作者: Administrator
本文链接:
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 欲念
前端
喜欢就支持一下吧