当前位置：首页 > article >正文

【2023-3-29】JavaScript使用promise顺序调用函数并抛出异常

article 2025/1/9 18:00:44

JavaScript使用promise顺序调用函数并抛出异常

场景

新建或者编辑时，一个页面中存在多个表单，每个表单都有单独进行表单验证。点击提交时，若有一个表单校验失败，则不能提交。
ps：为啥不放在一个表单中？
(⊙o⊙)…旧项目改造，业务实现中存在嵌套在多个折叠面板中的form表单，且部分表单验证会影响后续表单的验证

实现思路

可以使用 Promise 的链式调用来实现这个功能。即在前一个函数的then回调中调用后一个方法，最后通过catch抛出错误。

具体示例

<script>
  function validateMethod1() {
    return new Promise((resolve, reject) => {
      // 验证方法一的代码
      let temp1 = Math.random() * 10
      console.log('temp1', temp1)
      const isValid = temp1 > 5; // 假设验证方法一通过

      if (isValid) {
        resolve();
      } else {
        reject(new Error("验证方法一失败"));
      }
    });
  }

  function validateMethod2() {
    return new Promise((resolve, reject) => {
      let temp2 = Math.random() * 10
      console.log('temp2', temp2)
      // 验证方法二的代码
      const isValid = temp2 > 6; // 假设验证方法二通过

      if (isValid) {
        resolve();
      } else {
        reject(new Error("验证方法二失败"));
      }
    });
  }

  validateMethod1()
    .then(() => validateMethod2())
    .then(() => {
      console.log("两个方法都验证通过了");
    })
    .catch((error) => {
      console.error(error.message);
    });
</script>

上面的代码中，先定义了两个验证方法 validateMethod1 和 validateMethod2，它们都返回 Promise 对象。在 Promise 链式调用中，先调用 validateMethod1，如果验证通过就继续调用 validateMethod2，最后在链式调用的最后一个 then 方法中输出成功信息。如果在验证方法中出现错误，则会被捕获并输出错误信息。

为什么每一个方法中都需要return一个promise？

是的，每一个方法都需要返回一个 Promise 对象。Promise 是 JavaScript 中的一种异步编程解决方案，可以很好地处理异步代码的执行顺序和结果传递等问题。

在上面的例子中，validateMethod1 和 validateMethod2 都返回了一个 Promise 对象，并在验证通过时调用 resolve 方法，在验证失败时调用 reject 方法，并传入一个错误对象。这样，在链式调用中，当一个方法验证通过时，就会继续执行下一个方法，如果有一个方法验证不通过，就会在链式调用中捕获到错误并输出错误信息。

如果一个方法没有返回 Promise 对象，就无法使用 Promise 链式调用来串联多个方法。因此，每一个方法都需要返回一个 Promise 对象，以便能够使用 Promise 链式调用来实现方法的调用和验证。