form?表單驗(yàn)證是異步問題記錄(推薦)
更新時(shí)間：2023年01月13日 15:23:04 作者：CryptoCode?lv-4
這篇文章主要介紹了form?表單驗(yàn)證是異步問題記錄,通過實(shí)例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下
form 表單驗(yàn)證是異步的
const submit = () => {
// 驗(yàn)證器A
const validateA = () => {
quotationSettingFormRefA.value.validate((valid: boolean) => {
if (valid) {
data.validA = true
} else {
data.validA = false
}
console.log(data.validA, 'validateA')
})
}
// 驗(yàn)證器B
const validateB = () => {
quotationSettingFormRefB.value.validate((valid: boolean) => {
if (valid) {
data.validB = true
} else {
data.validB = false
}
console.log(data.validB, 'validateB')
})
}
// 等待兩個(gè)驗(yàn)證結(jié)束之后再進(jìn)行提交
Promise.all([validateA(), validateB()]).then(() => {
console.log(data.validA, data.validB, 'valid')
})
}
從截圖可以發(fā)現(xiàn)是先執(zhí)行了 then 里面的代碼，然后再是驗(yàn)證器，說明form驗(yàn)證器是異步的，所以這種情況會(huì)影響提交，接著換另外一種方式
const submit = () => {
const validateA = () => {
return new Promise((resolve) => {
quotationSettingFormRefA.value.validate((valid: boolean) => {
if (valid) {
data.validA = true
} else {
data.validA = false
}
resolve(valid)
console.log(data.validA, '左邊驗(yàn)證')
})
})
}
// 右邊驗(yàn)證
const validateB = () => {
new Promise((resolve) => {
quotationSettingFormRefB.value.validate((valid: boolean) => {
if (valid) {
data.validB = true
} else {
data.validB = false
}
resolve(valid)
console.log(data.validB, '右邊驗(yàn)證')
})
})
}
// 等待兩個(gè)驗(yàn)證結(jié)束之后再進(jìn)行提交
Promise.all([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
}
Promise.all 和 Promise.allSettled 區(qū)別
Promise.allSettled([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
Promise.all有一個(gè)成功，后面就斷掉了Promise.allSettled也是有一個(gè)成功，后面也斷掉了- 不一樣的就是兩這種返回值：
all返回單個(gè)值，allSettled返回對(duì)象
到此這篇關(guān)于form 表單驗(yàn)證是異步問題記錄的文章就介紹到這了,更多相關(guān)form 表單驗(yàn)證異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
今天小編就為大家分享一篇解決vue組件中click事件失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見，下面就來詳細(xì)的介紹一下2018-11-11
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了Vue自定義指令的實(shí)現(xiàn)，Vue支持自定義指令，開發(fā)者可以根據(jù)自己的需求，創(chuàng)建自己的指令來擴(kuò)展Vue的功能，需要詳細(xì)了解可以參考下文2023-05-05
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng)。那么它的實(shí)現(xiàn)原理有又是如何呢?下面小編和大家來一起學(xué)習(xí)一下2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單選和多選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue-cli 構(gòu)建骨架屏的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12