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

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

场景

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

实现思路

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

具体示例

<script>function validateMethod1() {return new Promise((resolve, reject) => {// 验证方法一的代码let temp1 = Math.random() * 10console.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() * 10console.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 链式调用来实现方法的调用和验证。

补充：

上述示例只是一个简单的实现思路，不代表具体业务逻辑。

问题场景存在局限性，仅作为自身解决问题的记录