网站建设需注意哪些事项,wordpress设置,企业建站套餐,恒基建设集团网站地址JavaScript使用promise顺序调用函数并抛出异常
场景
新建或者编辑时#xff0c;一个页面中存在多个表单#xff0c;每个表单都有单独进行表单验证。点击提交时#xff0c;若有一个表单校验失败#xff0c;则不能提交。 ps#xff1a;为啥不放在一个表单中#xff1f; (…JavaScript使用promise顺序调用函数并抛出异常
场景
新建或者编辑时一个页面中存在多个表单每个表单都有单独进行表单验证。点击提交时若有一个表单校验失败则不能提交。 ps为啥不放在一个表单中 (⊙o⊙)…旧项目改造业务实现中存在嵌套在多个折叠面板中的form表单且部分表单验证会影响后续表单的验证
实现思路
可以使用 Promise 的链式调用来实现这个功能。即在前一个函数的then回调中调用后一个方法最后通过catch抛出错误。
具体示例
scriptfunction 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 链式调用来实现方法的调用和验证。
补充
上述示例只是一个简单的实现思路不代表具体业务逻辑。
问题场景存在局限性仅作为自身解决问题的记录
