https://github.com/zhou62396272/bucketName
这是我写的简单的模版案例，不嫌麻烦的可以跑一下项目试试帮我解决一下，🙏谢谢了！！
因为要求是输入即校验，需要调用接口，所以需要防抖
因为callback已废除，必须以Promise的形式才能触发validator，一般的debounce不能满足返回Promise的需求
现在的问题是：输入框不停输入时，以下代码防抖效果有了
但是因为每次输入都会把之前的那一次Promise取消掉，于是当我快速输入时，最后一次输入停了之后，其实是触发validator提示了，但是因为之前不停的在取消，所以页面来不及渲染，导致页面没有任何提示
如果是一个一个慢慢输入的话是能正常显示校验的
请问有什么解决方法吗
const abortPromise = (promise1) => {
let abort
const promise2 = new Promise((resolve, reject) => {
abort = reject
})
const p = Promise.race([promise1, promise2])
p.abort = abort
return p
}
const debouncePromise = (success, fail, time) => {
let promise
return function(...rest) {
if (promise && typeof promise.abort === 'function') {
promise.abort()
}
const timeoutPromise = new Promise((resolve) => {
setTimeout(() => {
resolve(undefined)
}, time)
})
promise = abortPromise(timeoutPromise)
return promise.then(() => {
return success(...rest)
}, () => {
return fail(...rest)
})
}
}
const fail = () => {
console.log('由于防抖中断了第一次的请求')
return Promise.resolve() // 忽视它暂时是正确的
}
const success = (rule, value, callback) => {
console.log('请求后台接口')
const reg = /^(?!(-|[-a-z0-9]*--|[-a-z0-9]*-$))[-a-z0-9]*[-a-z0-9]*$/
if (value.length < 1) {
return Promise.reject('名称不能为空')
}
if (value.length < 3 || value.length > 63) {
return Promise.reject('请输入 3~63 个字符')
} else if (!reg.test(value)) {
return Promise.reject('只允许小写字母、数字、短横线（-），且不能以短横线开头或结尾')
}
// 调用接口查询是否重复
return bucketNameCheck({
bucketName: bucketInfo.bucketName
}).then((res) => {
if (res.available) {
nameChecked.value = true
return Promise.resolve()
} else {
// message.warning('该Bucket已存在，或被其他用户占用')
return Promise.reject('该Bucket已存在，或被其他用户占用')
}
})
}
const check = debouncePromise(success, fail, 500)
const rule = {
bucketNameRules() {
return { validator: check, trigger: 'change', required: true }
}
}
