JavaScript使用promise順序調(diào)用函數(shù)并拋出異常

場景

新建或者編輯時，一個頁面中存在多個表單，每個表單都有單獨(dú)進(jìn)行表單驗證。點(diǎn)擊提交時，若有一個表單校驗失敗，則不能提交。
ps：為啥不放在一個表單中？
(⊙o⊙)…舊項目改造，業(yè)務(wù)實現(xiàn)中存在嵌套在多個折疊面板中的form表單，且部分表單驗證會影響后續(xù)表單的驗證

實現(xiàn)思路

可以使用 Promise 的鏈?zhǔn)秸{(diào)用來實現(xiàn)這個功能。即在前一個函數(shù)的then回調(diào)中調(diào)用后一個方法，最后通過catch拋出錯誤。

具體示例

<script>function validateMethod1() {return new Promise((resolve, reject) => {// 驗證方法一的代碼let temp1 = Math.random() * 10console.log('temp1', temp1)const isValid = temp1 > 5; // 假設(shè)驗證方法一通過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; // 假設(shè)驗證方法二通過if (isValid) {resolve();} else {reject(new Error("驗證方法二失敗"));}});}validateMethod1().then(() => validateMethod2()).then(() => {console.log("兩個方法都驗證通過了");}).catch((error) => {console.error(error.message);});
</script>

上面的代碼中，先定義了兩個驗證方法 validateMethod1 和 validateMethod2，它們都返回 Promise 對象。在 Promise 鏈?zhǔn)秸{(diào)用中，先調(diào)用 validateMethod1，如果驗證通過就繼續(xù)調(diào)用 validateMethod2，最后在鏈?zhǔn)秸{(diào)用的最后一個 then 方法中輸出成功信息。如果在驗證方法中出現(xiàn)錯誤，則會被捕獲并輸出錯誤信息。

為什么每一個方法中都需要return一個promise？

是的，每一個方法都需要返回一個 Promise 對象。Promise 是 JavaScript 中的一種異步編程解決方案，可以很好地處理異步代碼的執(zhí)行順序和結(jié)果傳遞等問題。

在上面的例子中，validateMethod1 和 validateMethod2 都返回了一個 Promise 對象，并在驗證通過時調(diào)用 resolve 方法，在驗證失敗時調(diào)用 reject 方法，并傳入一個錯誤對象。這樣，在鏈?zhǔn)秸{(diào)用中，當(dāng)一個方法驗證通過時，就會繼續(xù)執(zhí)行下一個方法，如果有一個方法驗證不通過，就會在鏈?zhǔn)秸{(diào)用中捕獲到錯誤并輸出錯誤信息。

如果一個方法沒有返回 Promise 對象，就無法使用 Promise 鏈?zhǔn)秸{(diào)用來串聯(lián)多個方法。因此，每一個方法都需要返回一個 Promise 對象，以便能夠使用 Promise 鏈?zhǔn)秸{(diào)用來實現(xiàn)方法的調(diào)用和驗證。

補(bǔ)充：

上述示例只是一個簡單的實現(xiàn)思路，不代表具體業(yè)務(wù)邏輯。

問題場景存在局限性，僅作為自身解決問題的記錄