form?表單驗(yàn)證是異步問題記錄(推薦)
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)容請搜索腳本之家以前的文章或繼續(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中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下2018-11-11vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表,點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻;同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件(視頻)的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能,感興趣的朋友一起看看吧2022-12-12