欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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.allPromise.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無法取值問題的解決方法

    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事件失效的問題

    解決vue組件中click事件失效的問題

    今天小編就為大家分享一篇解決vue組件中click事件失效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 解決vue路由name同名,路由重復(fù)的問題

    解決vue路由name同名,路由重復(fù)的問題

    這篇文章主要介紹了解決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è)人理解

    這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細(xì)的介紹一下
    2018-11-11
  • Vue中的事件處理詳情

    Vue中的事件處理詳情

    這篇文章主要介紹了Vue中的事件處理詳情,文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹,需要的小伙伴可以參考一下
    2022-05-05
  • Vue自定義指令深入探討實(shí)現(xiàn)

    Vue自定義指令深入探討實(shí)現(xiàn)

    這篇文章主要介紹了Vue自定義指令的實(shí)現(xiàn),Vue支持自定義指令,開發(fā)者可以根據(jù)自己的需求,創(chuàng)建自己的指令來擴(kuò)展Vue的功能,需要詳細(xì)了解可以參考下文
    2023-05-05
  • 淺談Vue的響應(yīng)式原理

    淺談Vue的響應(yīng)式原理

    讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng)。那么它的實(shí)現(xiàn)原理有又是如何呢?下面小編和大家來一起學(xué)習(xí)一下
    2019-05-05
  • vue實(shí)現(xiàn)單選和多選功能

    vue實(shí)現(xiàn)單選和多選功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單選和多選功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • vue-cli 構(gòu)建骨架屏的方法示例

    vue-cli 構(gòu)建骨架屏的方法示例

    這篇文章主要介紹了vue-cli 構(gòu)建骨架屏的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能

    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

最新評(píng)論