Ant Design Vue 使用axios.post()异步请求服务器数据验证表单＜a-from＞是否存重复数据

vue 单文件组
regist.vue

<template>
	<a-form
	ref='refForm'  //用于表单验证
	:rules="rules"
	:model='registData'  //绑定表单数据
	>
		<a-form-item name='phoneNumber' label="手机号码">
			<a-input v-model:value="registData.PhoneNumber"></a-input>
		</a-form-item>
	</a-form>
</template>
<script lang='ts' setup>
import { reactive } from 'vue';

// 设置一个响应式对象
const registData = reactive({
	PhoneNumber:'';
})
// ant 表单验证对象
const reForm = ref()

//自定义验证规则
const phoneNumberValidate = async (_rule:Rule,value:string)=>{
    if(value.length === 11){
        try{
            let status = await axiosObj.post(
                "http://localhost:5173/regist_validate",
                {phoneNumber:value}
            )
            if(status.data[0].status===1){
                return Promise.reject('手机号已被注册过')
            }else{
                return Promise.resolve()
            }
        }catch(error){}
    }
}

//设置表单验证规则
const rules = {
	phoneNumber:[
		{validator:phoneNumberValidate}
	]
}

</script>

由于axios.post()是异步的，是一个promise 对象，在异步函数中是无法捕捉到 promise.reject() 的，必须要在得到 axios.post 之外返回 promise.reject() 和 Promise.resolve()才可以正确拿到结果。